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'); 
    });    
}

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

我认为如果我有apply_click（）接受一个引用新创建元素的参数，可能有办法实现它，但我不确定它是如何工作的。

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

Answer 1

每次创建新元素时，您都会将点击事件附加到$('.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/

JQuery - 如何只对元素应用一次函数

4 个答案: