事件鏈接如何適用於多個對象？

Question

當用戶點擊twitter引導模式窗口按鈕上的確認按鈕時，我在頁面上執行刪除操作。

我有兩個按鈕：一個允許用戶取消操作，另一個確認。

當用戶點擊確認刪除按鈕時，當模式隱藏時，我執行我的操作，例如我可以顯示一個動畫並實際刪除該項目。

如果用戶點擊了一些項目，但他/她的選擇是取消按鈕，當他/她點擊他/她想要刪除的項目時，刪除也會在選擇的元素上執行取消。

「hidden」事件一旦執行就不應該與元素分離嗎？

我知道我可以分開事件鏈變化$('#confirmDeleteModal').on('hidden', function() {到$('#confirmDeleteModal').off('hidden').on('hidden', function() {但我真的會明白爲什麼會發生這種情況。我錯過了什麼嗎？

的代碼是：

$(document).ready(function(){ 
    $('.delete').on('click', function() { 
     var itemID = $(this).data('product-id') 

     $('#confirmDeleteModal').modal('show'); 

     $('#confirmDelete').on('click', function() { 

      $('#confirmDeleteModal').on('hidden', function() { 
       // Here I do my stuff to perform deletion 
       $('#result').append('This method has been called for ' + itemID + ' <br />') 
      }); 
     }); 
    }); 
}); 

我希望我已經清楚地暴露我的問題。我準備了一個JS斌，以及：http://jsbin.com/inulaw/5/edit

Answer 1

這裏的問題是，你是連接每次額外聽衆的click和hidden事件。要解決此問題，請在再次調用.on('eventname')之前鏈接jQuery .off('eventName')方法。

這裏是你的代碼的JS斌更新和偉大的工作：

$(document).ready(function(){ 
    $('.delete').on('click', function() { 
     var itemID = $(this).data('product-id') 

     $('#confirmDeleteModal').modal('show'); 

     $('#confirmDeleteModal').off('hidden'); // must reset from previous 
     $('#confirmDelete').off('click').on('click', function() { 

      $('#confirmDeleteModal').on('hidden', function() { 

        // Here I do my stuff to perform deletion 
        $('#result').append('This method has been called for ' + itemID + ' <br />') 
      }); 
     }); 
    }); 
}); 

編輯：我感動$('#confirmDeleteModal').off('hidden');點擊事件的上方，它重置確認是否被點擊。