1

私はポップオーバーを呼び出しからのデータで埋めたいと思っていbuttonsます。clickajax

私がやった事

   $(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どうかにかかわらず、 がクリックされるたびに ajax 呼び出しを行っています。showhide

$(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 と例。data var を ajax で返されたデータに置き換えます。 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: ''})

クリック イベント中にポップオーバーを割り当てると、ハンドラーを何度も追加することになります。トリガー「クリック」として渡されたポップオーバー プロパティを介して初期化する必要があるだけです。

于 2015-07-02T20:56:18.533 に答える