Wie fügt man Ereignis-Listener zu Elementen hinzu, die dynamisch im Prototyp erstellt werden?

Question

HTML

<div id="main"></div> 

JS

var TestClass = function() {}; 
TestClass.prototype = { 
    addElement: function(parentId) { 
    var parent = document.querySelector('#' + parentId); 
    var a = document.createElement('a'); 
    a.textContent = '+'; 
    a.href = '#'; 
    a.addEventListener('click', this.onElementClick, false); //nothing happens on click 
    parent.innerHTML = a.outerHTML; 
    }, 

    onElementClick: function() { 
    console.log('dynamic element clicked'); 
    } 
}; 

new TestClass().addElement('main'); // on DOM ready 

Ausgabe

<div id="main"><a href="#">+</a></div> 

Answer 1

So:

var TestClass = function() {}; 
 
TestClass.prototype = { 
 
    addElement: function(parentId) { 
 
    var parent = document.getElementById(parentId); //Changed to getElementById 
 
    var a = document.createElement('a'); 
 
    a.textContent = '+'; 
 
    a.href = '#'; 
 
    a.addEventListener('click', this.onElementClick, false); 
 
    parent.append(a); //Changed 
 
    }, 
 

 
    onElementClick: function() { 
 
    console.log('dynamic element clicked'); 
 
    } 
 
}; 
 

 
new TestClass().addElement('main'); // on DOM ready

<div id="main"></div>

Sie nicht hinzu, Ihre a-parent, stattdessen haben Sie einfach HTML hinzugefügt.

Answer 2

Sie die Ereignis-Listener hinzufügen, richtig, aber vergessen, das Element hinzuzufügen.

Ich habe document.body.append(a) zu der addElement Methode hinzugefügt.

Dies führt zu den folgenden Code:

var TestClass = function() {}; 
TestClass.prototype = { 
    addElement: function(parentId) { 
    var parent = document.querySelector('#' + parentId); 
    var a = document.createElement('a'); 
    a.textContent = '+'; 
    a.href = '#'; 
    a.addEventListener('click', this.onElementClick, false); 
    document.body.append(a); 
    parent.innerHTML = a.outerHTML; 
    }, 

    onElementClick: function() { 
    console.log('dynamic element clicked'); 
    } 
}; 

new TestClass().addElement('main'); // on DOM ready 

Test it out here