Присоединить событие к динамическим элементам в javascript

Question

Я пытаюсь динамически вставлять данные html в динамически созданный список, но когда я пытаюсь подключить событие onclick для динамически создаваемой кнопки, событие не запускается. Решение было бы действительно оценено.

Javascript код:

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 код:

<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

Это благодаря тому, что ваш элемент создан динамически, и вы должны event delegation для обработки события.

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

JQuery сделать проще:

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

Вот статья, вы можете прочитать о делегировании событий event delegation article

Answer 2

Вы можете сделать что-то похожее на это:

// 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

Вам нужно прикрепить событие после создания элемента. Как:

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

Существует обходной путь, захватив кликов document.body, а затем проверки цели события.

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