為什么我的 jQuery 委托點擊多次觸發？

Question

我正在復制一個元素並將其添加到元素列表中。 首先，我使用 ajax 調用獲取一些 HTML：

var setButtonClick = function (url, btn) {
    $.ajax(url, $('form').serialize(), 'Html').then(function (data) {
        $(btn).parent().find(sel.addListItem).on('click', function () {
            addListItem(data, this, btn);              
        });

        addListItem(data, btn, btn);          
    });
}

addListItem看起來像這樣：

var addListItem = function (data, context, btn) {
    
    var $template = $(data);
    // stuff not related removed for brevity
          
    $(btn).before($template);      
}

然后我有一個使用委托的刪除功能：

 $(sel.editableList).delegate(sel.removeListItem, 'click', function () {
     // fires once for every element with the sel.removeListItem selector
 }

我只需要為單擊的元素觸發一次單擊事件。 我可以通過插入這樣的內容來獲得delegate的基本版本：

$( "body" ).delegate( "p", "click", function() {
    $( this ).after( "<p>Another paragraph!</p>" );
});

因此，我想這可能是因為我插入了元素的副本，還是我一遍又一遍地添加了同一個元素？ 我還嘗試使用clone在插入之前創建一個新元素，例如：

 var $template = $(data).clone();

誰能告訴我我哪里出錯了？

Answer 1

問題是，每次調用 ajax 時，您都會將 click 事件處理程序附加到元素。 它被重復調用，因為您將它添加到已經存在並附加了此處理程序的元素中。

您的問題的解決方案是使用off()函數分離先前附加的處理程序。

var setButtonClick = function (url, btn) {
    $.ajax(url, $('form').serialize(), 'Html').then(function (data) {
        $(btn).parent().find(sel.addListItem)
            .off('click')
            .on('click', function () {
                addListItem(data, this, btn);              
            });

        addListItem(data, btn, btn);          
    });
}

#

將來您可能想要附加不同的點擊事件處理程序或可能想要關閉特定的處理程序，為此您可以使用命名空間。

$(elem).on('event.namespace', function(){});
$(elem).off('event.namespace');

這樣你就可以在一個元素上有多個點擊事件處理程序。 如果您有多個點擊事件處理程序，這將是代碼

var setButtonClick = function (url, btn) {
    $.ajax(url, $('form').serialize(), 'Html').then(function (data) {
        $(btn).parent().find(sel.addListItem)
            .off('click.addItem')
            .on('click.addItem', function () {
                addListItem(data, this, btn);              
            });

        addListItem(data, btn, btn);          
    });
}

#

這是示例。

 $('.btn').on('click.ns1', function(){ alert('Hey'); }); $('.btn').on('click.ns2', function(){ alert('How you doin?'); }); // Comment me out to see the difference $('.btn').off('click.ns2');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn">Click me</button>