Question

我有一排buttons，并且每click我想要使用ajax来电的数据填充popover。

我做了什么

   $(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返回的数据替换data var。 http://jsfiddle.net/1qgwn1Lu/

HTML：

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

jQuery：将事件附加到＆＃39; show.bs.popover＆＃39; bootstrap popover event documentation然后启动popover。

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: ''})

如果在click事件期间分配popover，则反复添加处理程序。只需要通过传递的弹出窗口属性初始化为触发器＆＃39;点击＆＃39;

更改其内容后，Bootstrap popover不会切换

2 个答案: