Bootstrap 弹出窗口在更改内容后不切换

Question

我有一行 buttons，在每个 click 上，我想用来自 ajax 调用的数据填充弹出窗口。

我做了什么

   $(document).on('click','.foo', function (event){
   $(this).popover({
            html: true,
            trigger: 'manual',
            title:'Foo Title',
            placement: 'bottom',
            content: ''
}).popover('toggle');
    event.preventDefault();
    var id = $(this).attr('id').substring(21);
    getResults(id);
});

现在我可以切换弹出窗口和运行为我提供所需数据的功能。

    $.ajax({
        url: url,
        type: "get",
        success: function (response) {
           var $data = $(response);
           console.log($data);
           var data = $data;
           var popover = $('#foo' + id).attr('data-content',data).data('bs.popover');
           popover.setContent();
           popover.$tip.addClass(popover.options.placement);

        },
        error: function () {
            console.log("fail");
        }
    });

弹出窗口正确打开并且 ajax 数据附加正确。但问题是弹出窗口保持打开状态，我无法再关闭它。

Answer 1

每次单击 .foo 时，您都会调用 ajax，无论弹出窗口是否应该切换 show 或 hide。

$(document).on('click', '.foo', function (event) {
    var $this = $(this);

    $this.popover({
        html: true,
        trigger: 'manual',
        title:'Foo Title',
        placement: 'bottom',
        content: ''
    }).popover('toggle');

    event.preventDefault();

    $this.on('show.bs.popover', function () {
        var id = $(this).attr('id').substring(21);
        getResults(id);
    });
});

Answer 2

JSFiddle 示例。用 ajax 返回的数据替换数据变量。 http://jsfiddle.net/1qgwn1Lu/

HTML:

<button type="button" class="foo">Click to toggle popover</button>

jQuery：在 'show.bs.popover' bootstrap popover event documentation 上附加事件，然后启动弹出窗口。

var eNumber = 1;
    $('.foo').on('show.bs.popover', function () {
               //replace this data with ajax call.
               var data = 'ajaxCall#' + eNumber;
               var popover = $(this).attr('data-content',data).data('bs.popover');
               popover.setContent();
               popover.$tip.addClass(popover.options.placement);
               eNumber += 1;
    }).popover({html: true,
                trigger: 'click',
                title:'Foo Title',
                placement: 'bottom',
                content: ''})

如果您在单击事件期间分配弹出窗口，您将一遍又一遍地添加处理程序。只需要通过传入的popover属性初始化为trigger 'click'

Bootstrap 弹出窗口在更改内容后不切换

Bootstrap popover does not toggle after changing its content

ajax

jquery

twitter-bootstrap

bootstrap-popover