Question

当用户点击Twitter bootstrap模态窗口按钮上的确认按钮时，我正在页面上执行删除操作。

我有两个按钮：一个允许用户取消操作，另一个按钮确认。

当用户点击确认删除按钮时，隐藏模态时，我会执行我的操作，例如我可以显示动画并实际删除该项目。

如果用户点击了几个项目，但他/她的选择是取消按钮，当他/她点击他/她想要删除的项目时，也会对要取消选择的元素执行删除。

一旦执行了“隐藏”事件，是否应该从元素中分离出来？

我知道我可以将事件链接更改$('#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 Bin：http://jsbin.com/inulaw/5/edit

Answer 1

此处的问题是，您每次都会将其他侦听器附加到click和hidden个事件。要解决此问题，请在再次调用.off('eventName')之前链接jQuery .on('eventname')方法。

这是您的代码更新并在JS Bin中运行良好：

$(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');移至点击事件之上，以便重置是否点击了确认。

事件链如何适用于多个对象？

1 个答案: