jQuery的克隆元素和它的子按鈕單擊事件觸發多次

我有一些代碼來clone錶行：jQuery的克隆元素和它的子按鈕單擊事件觸發多次

// Clone existing row and make it a template row 
var clone = $('table tbody tr:last').clone(); 
clone.insertBefore('table tbody tr:first'); 
clone.find('.edit').click();

正如你看到的我想.edit類火災的click事件<button>的。

的click事件是這樣的：

$('body').on('click', '.edit, .cancel', function(e) 
{ 
    e.preventDefault(); 

    // Do something here... 
});

用戶點擊對話框的關閉按鈕，然後我$(".widget-container").remove();刪除表的容器。稍後，如果用戶再次打開對話框，則可以重新創建此容器 - 如果發生這種情況，容器和表格將再次插入到DOM中。

這是我用來加載該對話框的代碼，它的HTML：

$.ajax({ 
     url: 'getDialogUrl', 
     type: 'GET', 
     cache: false, 
     success: function(html) 
     { 
      $(html).insertAfter('.someOtherExistingDOMElement'); 

      .... 
     }

的問題是，在這第二次，當clone.find('.edit').click();被稱爲它的觸發事件click兩次。如果我關閉對話框並重新打開它，點擊被激發3次，依此類推......

我認爲remove會清除綁定到從DOM中刪除的元素的所有事件。看起來這沒有發生。

我想我是錯誤地克隆它。我試過.clone(false)和.clone(false, false);，但它保持相同的行爲。

這是怎麼發生的？關於我在這裏做錯了的任何想法？

來源

2014-01-24 Leniel Macaferi

你能提供一個小提琴嗎？ – Satpal

你能告訴我們你的對話開放腳本嗎？我想我知道這個問題，但在確定它之前不會回答。 –

@ Karl-AndréGagnon：更新了問題... –

這是另一個實例「發佈問題後發現的解決方案」 ......這個問題幫我解決這個問題：

jQuery click events firing multiple times

我必須做什麼whas此：

$('body').off().on('click', '.edit, .cancel', function(e) 
{ 
    e.preventDefault(); 

    // Do something here... 
});

您在on()之前看到off()。這保證了只有一個click事件被綁定到元素。

這個answer揭示了這個問題。

您會發現：每次運行on事件處理程序時，都會爲該元素附加另一個處理程序，這就是爲什麼每次關閉/刪除對話框然後重新打開/重新創建它時，都會附加多個事件處理程序對話被打開的時間。 :)

來源

2014-01-24 18:57:33

jQuery的克隆元素和它的子按鈕單擊事件觸發多次

回答

相關問題