Question

如何为动态创建的元素提供事件侦听器？在下面的示例中，所有这些代码执行后变量term_num递增1（term_num ++），因此每次调用#abtn click事件时，都会创建一个新的div元素“term_ [term_num]”。如何为每个新div提供一个click事件监听器？

$( 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);

Answer 1

您可以使用.on()提前注册： Live demo (click).

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

});

或在追加它之前创建dom元素newTerm并直接附加该函数： Live demo (click).

var $newTerm = $(newTerm);

$newTerm.click(function() {

});

由于您要添加到元素的选择器是动态ID，我建议使用第二种方法。如果要向生成的元素添加类以便将.on委托给它们，请使用.on。效率更高。

Answer 2

创建课程时添加课程。

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事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

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

2 个答案: