jQuery-如何仅将函数应用到元素一次

Question

假设我有这个：

<div id='container'>
</div>
<input type='button' id='newTest' value='new' />

还有一些JQuery / JavaScript：

$('#newTest').click( function() {
    var newDiv = "<div class='test'>Click Me</div>";
    $('#container').append(newDiv);
    apply_click();
});

function apply_click() {
    $('.test').click( function() {
        alert('clicked'); 
    });    
}

创建的每个新“测试” div都应在单击时发出警报……但是每次我们创建一个新的“测试” div时，.click函数都会再次应用于所有这些“ div”，这意味着如果我单击“新建”按钮3次，然后单击第一个“ Click Me” div，依次弹出3个“ clicked”警报...问题是：如何使apply_click（）函数仅应用于尚未应用的元素。 ..？

我在想，如果我让apply_click（）接受一个对新创建的元素的引用的参数，可能会有一种方法，但是我不确定这将如何工作。

CodePen： http ：//codepen.io/anon/pen/rGcwx

Answer 1

每次创建新元素时，您都会将click事件附加到$('.test')选择的所有元素上，该元素是具有该类的每个元素，包括已经添加的元素。

为什么不使用事件委托，它可以让您一次绑定一个事件处理程序？

$('#container').on('click', '.test', function(e){ ... });

所有对.test元素的点击都会弹出#container ，您可以在那里处理它们。

Answer 2

设置方法是，每次创建新元素时，都会将新的单击处理程序应用于所有 .test元素。 将特定元素传递到apply_click()函数中，以便仅将其应用于新的div。

$('#newTest').click( function() {
    var newDiv = $("<div class='test'>Click Me</div>");
    $('#container').append(newDiv);
    apply_click(newDiv);
});

function apply_click(element) {
    $(element).click( function() {
        alert('clicked'); 
    });    
}

Answer 3

创建一个新的jQuery对象，然后添加它，然后将单击绑定到该对象，而不是整个类。

$('#newTest').click(function () {
    var newDiv = $("<div class='test'>Click Me</div>");
    $('#container').append(newDiv);
    newDiv.click(apply_click)
});
function apply_click() {
    alert('clicked');
}

Answer 4

更改您的代码以使用一种方法：

$('#newTest').one("click", function() { var newDiv = "<div class='test'>Click Me</div>"; $('#container').append(newDiv); apply_click(); });

.one（）方法与.on（）相同，不同之处在于处理程序在首次调用后未绑定。 http://api.jquery.com/one/