javascript - 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，这意味着如果我单击"new" ' 按钮 3 次，然后单击第一个 'Click Me' div，依次弹出 3 个 'clicked' 警报...那么问题是:我怎样才能使 apply_click() 函数仅应用于它尚未应用的元素应用于...？

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

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

Answer 1

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

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

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

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