javascript - 来自 Ajax 的 Bootstrap Popover

Question

我创建了一个 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();

弹出窗口加载，但奇怪的是，第一次显示弹出窗口后，我必须单击两次才能隐藏弹出窗口。但在那之后弹出窗口工作正常:单击一次显示，再单击一次隐藏等等。

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

Answer 1

试试这个:

$.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();