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數據附加正確。但問題是，popover保持打開狀態，我無法再關閉它。

Answer 1

無論彈出窗口是否應該切換show或hide，每次單擊.foo時都會發出ajax調用。

$(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 with example。將數據var替換爲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: ''}) 

如果在點擊事件期間分配彈出窗口，則一次又一次地添加處理程序。只需要通過傳入的彈出窗口屬性進行初始化，如觸發'點擊'