动态引导弹出框仅第一次显示

Question

我对引导弹出框有一个奇怪的问题，弹出框是在单击按钮时动态创建的，它会创建产品，然后将 ajax url 中的内容加载到其中。

弹出框应该在关闭时被销毁，但我认为这可能不是，在第一次点击时它加载正常，但在随后的点击中它不显示，但我可以看到它在后台发出多个加载请求。

例如在第一次单击时，我看到在控制台中进行了一次调用，第二次单击 2，第三次单击 5，依此类推。

          $('.quickBuy').on('click', function (e) {

            e.preventDefault();
            var el = $(this);
            var productId = $(this).attr('data-productId');
            var URI = '@Url.Action("QuickBuy", "Home")' + '?id=' + productId;
            var content;
            var updatePopover;


            $(el).popover({
                title: 'Quick Buy ' + productId + '<span class="glyphicon glyphicon-remove-circle bidstreetclose"></span>',
                container: 'body',
                placement: 'right',
                html: true,
                content: '<div id="' + productId + 'content" style="width:250px; height:140px;"> loading...</div>'
            });

            $(el).on('shown.bs.popover', function () {
                $('.popover').find('.bidstreetclose').on('click', function (e) {
                    $(el).popover('hide');
                });
                $('#' + auctionId + 'content').load(URI);
                updatePopover = setInterval(function () {
                    $.get('/Ajax/GetProductInfoById?id=' + auctionId, function (data) {
                    });

                }, 2000);
            });

            $(el).on('hidden.bs.popover', function () {
            clearInterval(updatePopover);
                $(el).popover('destroy');
                $('.popover').remove();
            });
            $(el).popover('show');

            $('#submit').on('click', function (e) {
                $(document).submitQuickBuy(this);
            });

        });

非常感谢您的帮助。

Answer 1

我认为这是因为每次单击“快速购买”按钮时都会附加一个事件处理程序。您可能必须将弹出窗口的事件绑定代码移到按钮单击处理程序之外，或者使用 off() (http://api.jquery.com/off/) 分离现有的事件处理程序并绑定新的事件处理程序。

$(el).off('shown.bs.popover').on('shown.bs.popover', function () {
});