Question

我有一个从按钮调用的BOOTSTRAP模态。在模态上，有一个带有弹出窗口的表单。我有代码工作，以显示弹出窗口然后隐藏它，如果用户点击弹出窗口。但是，如果用户再次单击带有弹出框的链接，则没有任何反应。没有事件发生。如何将click事件重新绑定到链接？这是我的代码：

$(document).on('click', 'span.cvv-popover', function(e) {
        $(this).popover('show').on('shown.bs.popover', function () {
            $(document).on('click', '#renewal-form', function(e) {
                $('.popover').each(function () {
                    // hide any open popovers when the anywhere else in the body is clicked
                    if (!$(this).is(e.target && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0)) {
                        $('span.cvv-popover').popover('hide')
                    }
                })
            })
        })
    })

Answer 1

因为bootsrap的.popover在你调用它时会实例化popover命令，并且因为每次你点击.cvv-popover时附加一个body.on('click')监听器，我相信原因在第一次点击后您没有看到弹出框是因为您有.popover和.on('click')累积 - 这意味着在第一次点击后每次调用的最后一个代码将会是.popover('hide')。为了解决这个问题，我建议使用bootstrap的内置选择器选项并使用jQuery的.off方法。

首先只需从body元素调用.popover，但将选择器指定为.cvv-popover：

$('body').popover({ selector: '.cvv-popover' });

这会在所有.cvv-popover元素上实例化popover js，无论它们何时被添加到DOM中。

然后，为了通过点击DOM上的任何其他位置来删除弹出窗口，请附加一个监听器来引导shown.bs.popover：

$('body').on('shown.bs.popover', '.cvv-popover', function(e) {
    var _this = this;
    $('body').on('click.hidePopover', function(e) {
        if (!$(e.target).hasClass('popover-content')) {
            hidePopover(_this);
        }
    });
});

var hidePopover = function(popover) {
    $(popover).popover('hide');
    $('body').off('.hidePopover');
};

此代码等待显示弹出窗口，当它出现时，它会向body添加一个单击侦听器事件。 click侦听器断言单击的元素本身不是弹出框，只要它不是弹出窗口，就调用hidePopover()函数，传入当前可见的弹出窗口。 hidePopover()函数将popover作为参数并继续隐藏该弹出框，然后从正文中删除click.hidePopover侦听器事件，以便在单击正文时.popover('hide')调用不再存在。因此，popover只隐藏一次，只有在可见之后才能隐藏，从而实现预期的功能。

Here is the JS fiddle

答案已更新为使用bootstrap

JS Fiddle动态地向dom添加第二个.cvv-popover，以便您可以确保代码适用于动态填充的元素

Answer 2

这看起来像是一个错字：

if (!$(this).is(e.target && [...].length === 0))
               ^                              ^
         this paren ...          is closed here

如果您的代码中确实是Ctrl+C/Ctrl+V，则应该修复它。

如何将单击事件重新绑定到隐藏的Bootstrap弹出窗口

2 个答案: