动态创建元素的事件监听器

-2

如何给动态创建的元素添加事件监听器？在下面的例子中，在所有这些代码执行变量term_num后递增1（term_num ++），所以每次调用#abtn click事件时，都会创建一个新的div元素“term_ [term_num]”。我如何给每个这些新的div一个点击事件监听器？动态创建元素的事件监听器

$(document).ready(function() { 
$("#abtn").click(function(event) { 
     var newterm = '<div id=\'term_'+term_num+'\'>'+term+' </div>'; 
     var term = document.getElementById("term_input").value; 
     $('#terms').after(newterm);

来源

2014-01-21 user3152309

你最好使用一个类，并使用委托绑定事件 –

可能重复的[事件绑定动态创建的元素？]（http://stackoverflow.com/questions/203198/event-binding-动态创建元素） –

如果您喜欢答案，请不要忘记单击答案左侧的复选标记，并在投票箭头下方“接受”最好的答案。这也会给你一些声望点！如果稍后有更好的答案，你可以切换到那个答案。如果你还没有参加SO巡演，请在这里查看：http：//stackoverflow.com/tour – m59

你可以只用.on()注册它提前：Live demo (click).

$(document).on('click', 'some-selector', function() { 

});

或追加其之前创建的DOM元素newTerm并附直接功能：Live demo (click).

var $newTerm = $(newTerm); 

$newTerm.click(function() { 

});

S因此，您添加到元素的选择器是一个动态ID，我建议在这里使用第二种方法。如果要将类添加到生成的元素，以便您可以将.on委托给它们，请使用.on。它更高效。

来源

2014-01-21 19:37:06 m59

+1这两种解决方案，但代表团避免必须绑定让我们说几百个相同的处理程序 –

@ A.Wolff好点，我对此进行了更新。 – m59

创建它们时添加一个类。

var newterm = '<div class="termsDiv" id=\'term_'+term_num+'\'>'+term+' </div>';

您需要使用Event Delegation来动态创建元素。您必须使用委托事件方法使用.on()。

即

$(document).on('event', 'selector', callback_function)

例

$(document).on('click', '.termsDiv', function(){ 
    //Your code 
    alert("clicked me"); 
});

在地方的document你应该用最接近的静态容器。

如果你愿意，你可以使用Attribute Starts With Selector [name^="value"]

$(document).on('click', 'div[id^="term_"]', function(){ 
    //Your code 
    alert("clicked me"); 
});

的委托事件有优势，他们可以处理来自被添加到该文件在稍后的时间后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并避免频繁附加和移除事件处理程序。

来源

2014-01-21 19:37:41 Satpal

动态创建元素的事件监听器

回答

相关问题