1

我有一行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 数据。但问题是弹出窗口保持打开状态，我无法再关闭它。

4

2 回答 2

1

无论弹出.foo框是否应该切换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);
    });
});
于 2015-07-02T19:36:00.583 回答
1

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

HTML：

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

jQuery：在“show.bs.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: ''})

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

于 2015-07-02T20:56:18.533 回答