Ajax的Bootstrap Popover

Petra Barus 发表于 Dev

佩特拉·巴鲁斯

我创建了一个jQuery插件，该插件从AJAX加载数据，然后从弹出窗口显示数据。当用户再次单击该按钮时，该按钮将显示弹出窗口，而不是从AJAX重新加载数据。

这是代码（这是jsfiddle https://jsfiddle.net/petrabarus/spqdqqhL/）

$.fn.myButton = function () {
    return this.each(function() {
        $(this).on('click', function () {
            var w = $(this);
            w.off('click');
            w.button('loading');
            $.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
                w.button('reset');
                w.popover({content: content})
                    .popover('show');
            });
        });
    });
}

$('.my-button').myButton();

弹出窗口已加载，但是奇怪的是，在第一次显示弹出窗口之后，我必须单击两次以隐藏弹出窗口。但是之后，弹出窗口可以正常工作：单击显示一次，然后再隐藏一次，依此类推。

这是怎么回事，以及如何解决？

阿米特·维索迪亚（Amit Visodiya）

试试这个：

$.fn.myButton = function () {
    return this.each(function() {
    $(this).on('click', function () {
        var w = $(this);
        w.off('click');
        w.button('loading');
        $.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
        w.button('reset');
        w.popover({content: content});
            //.popover('show');
          w.trigger( "click" ); // this is not proper way but it is working
        });
    });
    });
}

$('.my-button').myButton();