在元素被ajax加載後初始化引導彈窗

Question

當使用引導彈窗時，您必須在您的JavaScript代碼中初始化它們，例如$('#element').popover();。通常你會使用$(document).ready();函數。但是，如果popover綁定的元素由ajax自己加載呢？

由於對javascript沒有充分的信心，目前我遇到的問題是有一個頁面通過多個ajax調用加載其大部分內容。這些元件之一是：那來到我的腦海

<span class="infolink" style="vertical-align:bottom;" data-title="some title" data-placement="bottom" data-delay="500" data-content="some content"> 
Trigger Popover 
</span> 

一個解決方案，每個Ajax調用週期結束後通過的所有元素和初始化酥料餅（例如：$('.infolink').each(function(i,e){e.popover();});）。我不想這樣做，因爲這會影響性能，因爲ajax調用的數量和頁面的大小。有沒有其他方法？

另一個想法是有一個功能（例如function initializePopover(element){...}）並調用它的元件已被加載<span class="infolink" [...] onload="initializePopover(this)"></span>之後。但是這也不起作用。

是否有最佳做法來初始化觸發器元素本身將由ajax加載的彈出？

Answer 1

使用jQuery的event delegation機制捕獲，其以異步方式加載的元素：

假設以下HTML從AJAX調用加載：

<span class="infolink" style="vertical-align:bottom;" data-title="some title" data-placement="bottom" data-delay="500" data-content="some content"> 
Trigger Popover 
</span> 

您的綁定將是這樣的：

$(document).on("click", ".infolink", function(e) { 
    $(e.target).popover(); 
}); 

這基本上是一個別名以下邏輯：

1. 的document元素點擊（這基本上是無處不在）
2. 檢查，如果點擊來自「.infolinks」
3. 冒泡時，如果它沒有 - 分派事件以這種方式回調

，即使元素稍後出現 - 您仍然可以將事件回調綁定到它。

Answer 2

我覺得最好的方法是一旦你的Ajax調用完成後附加一個

$('.infolink').popover(); 

你並不需要一個循環。

Answer 3

你有兩種解決方案：https://stackoverflow.com/a/11947156/2660794您可以選擇套房，爲您的一個..