Question

我的bootstrap popover有一个奇怪的问题，popover是在按钮上动态创建的，然后单击它创建产品，然后将ajax url中的内容加载到其中。

popover应该在关闭时销毁，但我认为可能不会，在第一次点击它加载正常，但在后续点击它没有显示，但我可以看到它在后台发出多个加载请求。

e.g。在第一次点击时，我看到一个呼叫是在控制台，第二个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 () {
});

Dynamic Bootstrap popover仅显示第一次

1 个答案: