Ereignis an dynamische Elemente in Javascript anfügen

Question

Ich versuche, HTML-Daten dynamisch in eine Liste, die dynamisch erstellt wird, einzufügen, aber wenn ich ein Onclick-Ereignis für die Schaltfläche anhängen, die dynamisch erstellt wird, wird das Ereignis nicht ausgelöst. Lösung würde wirklich geschätzt werden.

Javascript-Code:

document.addEventListener('DOMContentLoaded', function() { 
document.getElementById('btnSubmit').addEventListener('click', function() { 
    var name = document.getElementById('txtName').value; 
    var mobile = document.getElementById('txtMobile').value; 
    var html = '<ul>'; 
    for (i = 0; i < 5; i++) { 
     html = html + '<li>' + name + i + '</li>'; 
    } 
    html = html + '</ul>'; 

    html = html + '<input type="button" value="prepend" id="btnPrepend" />'; 
    document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html); 
}); 

document.getElementById('btnPrepend').addEventListener('click', function() { 
    var html = '<li>Prepending data</li>'; 
    document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html); 
}); 

});

HTML-Code:

<form> 
    <div class="control"> 
     <label>Name</label> 
     <input id="txtName" name="txtName" type="text" /> 
    </div> 
    <div class="control"> 
     <label>Mobile</label> 
     <input id="txtMobile" type="text" /> 
    </div> 
    <div class="control"> 
     <input id="btnSubmit" type="button" value="submit" /> 
    </div> 
</form> 

Answer 1

Dies ist darauf zurückzuführen, dass Ihr Element dynamisch erstellt wird, und Sie sollten event delegation Ereignis zu behandeln.

document.addEventListener('click',function(e){ 
    if(e.target && e.target.id== 'brnPrepend'){//do something} 
}) 

jquery es einfacher machen:

$(document).on('click','#btnPrepend',function(){//do something}) 

Hier ist ein Artikel, den Sie über Event Delegation event delegation article

Answer 2

Sie etwas ähnliches wie dies tun können:

// Get the parent to attatch the element into 
var parent = document.getElementsByTagName("ul")[0]; 

// Create element with random id 
var element = document.createElement("li"); 
element.id = "li-"+Math.floor(Math.random()*9999); 

// Add event listener 
element.addEventListener("click", EVENT_FN); 

// Add to parent 
parent.appendChild(element); 

Answer 3

Sie müssen das Ereignis nach der Erstellung des Elements befestigen. Wie:

document.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('btnSubmit').addEventListener('click', function() { 
 
    var name = document.getElementById('txtName').value; 
 
    var mobile = document.getElementById('txtMobile').value; 
 
    var html = '<ul>'; 
 
    for (i = 0; i < 5; i++) { 
 
     html = html + '<li>' + name + i + '</li>'; 
 
    } 
 
    html = html + '</ul>'; 
 

 
    html = html + '<input type="button" value="prepend" id="btnPrepend" />'; 
 
    document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html); 
 

 
    document.getElementById('btnPrepend').addEventListener('click', function() { 
 
     var html = '<li>Prepending data</li>'; 
 
     document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html); 
 
    }); 
 

 
    }); 
 
});

<form> 
 
    <div class="control"> 
 
    <label>Name</label> 
 
    <input id="txtName" name="txtName" type="text" /> 
 
    </div> 
 
    <div class="control"> 
 
    <label>Mobile</label> 
 
    <input id="txtMobile" type="text" /> 
 
    </div> 
 
    <div class="control"> 
 
    <input id="btnSubmit" type="button" value="submit" /> 
 
    </div> 
 
</form>

Answer 4

Es gibt eine Abhilfe durch Klicks auf document.body Erfassung und dann Ereignisziel zu überprüfen.

document.body.addEventListener('click', function (event) { 
    if(event.srcElement.id == 'btnSubmit') { 
    someFunc(); 
    }; 
});