Question

我正在使用bootstrap并且有一些链接，点击时显示模态。我将“on”事件处理程序绑定到“show.bs.modal”。当模态显示时，我从单击的按钮获取数据attr值。有几个按钮可以触发相同的模态，但每个按钮都分配了不同的数据值。单击第二个按钮时，它会运行事件处理程序两次，第一次单击一次，另一次单击第二次。这是代码：

<a href="#" data-ucid="1" data-toggle="modal" data-target="#delete-modal" class="delete"><img src="/resources/images/delete.png" class="delete-icon" />

$('#delete-modal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var ucId = button.data('ucid');
        var modal = $(this);

        modal.find('.modal-footer .btn-primary').click(function(event) {
            $('#delete-modal').find('.btn-primary').find('span').toggleClass('glyphicon').toggleClass('glyphicon-refresh').toggleClass('spinning');
            deleteConnection(ucId);
        });
    })

Answer 1

在其他事件处理程序中分配事件侦听器几乎总是不好的做法

对代码的快速修复是在分配新侦听器之前使用off('click')

modal.find('.modal-footer .btn-primary').off('click').click(function(event) {

更好的方法是使用button事件将数据存储在模态元素上并完全分离事件监听器

$('#delete-modal').on('show.bs.modal', function (event) {
        $(this).data('ucid', $(event.relatedTarget).data('ucid') );
});

$('#delete-modal .modal-footer .btn-primary').click(function(event) {    
    var ucid = $('#delete-modal').data('ucid');
    $(this).find('span').toggleClass('glyphicon').toggleClass('glyphicon-refresh').toggleClass('spinning');
     deleteConnection(ucId);
});

Answer 2

如果您点击模态页脚，它的点击事件将会触发。这将冒泡到模态，它的事件也会发生。

如果您只想触发一个事件，请在模态页脚的末尾添加e.oreventDefault()，然后单击回调。

jQuery事件处理程序触发两次

2 个答案: