事件链是如何为多个对象工作的

How does the event chaining works for multiple objects?

本文关键字：对象 工作 事件      更新时间：2023-09-26

当用户点击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 Bin: http://jsbin.com/inulaw/5/edit

这里的问题是您每次都将附加侦听器附加到click和hidden事件。为了解决这个问题，在再次调用.on('eventname')之前链接jQuery .off('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');移动到点击事件上方，因此它重置是否点击确认

相关文章：