一鍵生成多個AJAX調用

Question

一個奇怪的現象是發生在我..

我有一個項目，其中並排有刪除按鈕來刪除該文章的列表，這裏有一個例子： http://jsfiddle.net/lughino/8HYeQ/5/

$('.delete').on('click', function(e) { 
    e.preventDefault(); 
    var $li = $(this).parents('li'), 
     $url = $(this).attr('href'); 
    $('#delete_confirm').modal('show'); 
    $('#delete_confirm').find('button.btn-danger').click(function() { 
     $.post($url, function(result) { 
      $('#delete_confirm').modal('hide'); 
      $li.remove(); 
     }); 
    }); 
}); 

不幸的是，這個示例不能重現問題！

當我刪除I​​D爲1的第一篇文章時，執行ajax調用。

當我刪除第二個產品，id爲2,2運行AJAX調用，一個用於第1條，自然是因爲已被刪除它是成功的，一個是第二篇文章。

如果我刪除別的東西，因爲他執行3個Ajax調用，等等..

保持在內存中，如果舊的標識......你能解決這個奇怪的行爲？

從什麼到期？

Answer 1

這是因爲您正在註冊確認回調處理程序內刪除按鈕單擊處理程序。所以當你第一次點擊刪除按鈕時，處理程序會被註冊一次 - 所以ajax請求會被髮送一次。當你第二次點擊刪除按鈕確認處理程序註冊時，現在我們有兩個確認處理程序註冊。

應該

$('.delete').on('click', function(e) { 
    e.preventDefault(); 
    var $li = $(this).parents('li'), 
     $url = $(this).attr('href'); 
    $('#delete_confirm').modal('show'); 
}); 

$('#delete_confirm').find('button.btn-danger').click(function() { 
    $.post($url, function(result) { 
     $('#delete_confirm').modal('hide'); 
     $li.remove(); 
    }); 
});