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 功能都会再次应用于所有这些，这意味着如果我单击“新” ' 按钮 3 次，然后单击第一个 'Click Me' div，依次弹出 3 个 'clicked' 警报...问题是：如何使 apply_click() 函数仅适用于尚未应用的元素适用于...？

如果我让 apply_click() 接受一个引用新创建元素的参数，我想可能有办法做到这一点，但我不确定它是如何工作的。

代码笔：http://codepen.io/anon/pen/rGcwx

Answer 1

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

为什么不使用事件委托，这将允许您绑定单个事件处理程序一次？

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

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

Answer 2

创建一个新的 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 3

您设置它的方式是，每次创建新元素时，都会将一个新的点击处理程序应用于所有 .test 元素。将特定元素传递给apply_click() 函数，以便将only 应用于新的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 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/