Question

我创建了一个jQuery插件，用于从AJAX加载数据，然后从popover显示数据。当用户再次单击该按钮时，该按钮将显示弹出框，而不是从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();

popover加载，但奇怪的是，在首次显示弹出窗口后，我必须单击两次以隐藏弹出窗口。但之后，弹出窗口工作正常：单击显示一个，然后再隐藏一个。

发生了什么以及如何解决？

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

来自Ajax的Bootstrap Popover

1 个答案: