如何將jquery函數應用於ajax加載的內容

我使用tooltipster插件創建工具提示。我想要應用插件的一些內容在頁面打開時通過AJAX加載。如何將jquery函數應用於ajax加載的內容

我嘗試使用

jQuery(window).on("load", function(){ 
$('.tip1').tooltipster(); 
});

，但它似乎只適用於主網頁內容的功能，而不是在AJAX加載內容。

這是否工作：

$(document).on('ready ajaxComplete', function() { 
$('.tip1').tooltipster(); 
});

，但它似乎導致錯誤的內容再次通過AJAX重新加載。我看到很多這樣的警告在控制檯：

Tooltipster：一個或多個提示已經連接到這個元素：忽略。使用「多個」選項來附加更多工具提示

要獲得此工作的最佳方式是什麼？

編輯：外部內容加載這樣的：

所有的

<script type="text/javascript"> 
$(document).ready(function() { 
url = "source_url.php"; 
target= ".holder"; 
$(target).load(url); 
}); 
</script> 
<div class="holder"></div>

來源

2014-10-02 Dog

請加你如何加載和追加阿賈克斯 – jevgenig 2014-10-02 14:11:52

加載的內容，他們描述瞭如何在http://iamceege.github.io/tooltipster/#functionBeforeExample – andrew 2014-10-02 14:15:50

$(document).ready(function() { 
    url = "source_url.php"; 
    target= ".holder"; 
    $(target).load(url, function() { $('.tip1', $(this)).tooltipster(); }); 
});

來源

2014-10-02 16:55:58 LAPA

我試過這但不幸的是它似乎沒有做任何事情...工具提示沒有被應用到ajax加載的內容... – Dog 2014-10-05 09:07:23

你試過這個新版本嗎？ – LAPA 2014-10-07 09:09:36

很好，是的，編輯工作...謝謝... – Dog 2014-10-07 16:03:20

首先，適用於通過AJAX加載的內容插件的正確方法是一個回調函數添加到您的AJAX調用。我不知道如何追加通過AJAX加載的內容，但例如，如果您查看$ .load的jQuery文檔，則可以添加一個應該是函數的「完整」參數。這個函數將在ajax請求完成時被調用。它看起來是這樣的：

$(element).load('content.html', function() { 
    $('.tip1').tooltipster(); 
});

現在，我從來沒有用過Tooltipster但它說，它已經連接，肯定有從內容分離，並再次重新連接的方法。快速看看它的文檔有一個銷燬方法

$(...).tooltipster('destroy');

這意味着您可以在將插件重新應用到您的內容之前調用destroy方法。使用帶有回調函數相同的Ajax代碼，它會給你這樣的事情：

$(element).load('content.html', function() { 
    $('.tip1').tooltipster('destroy').tooltipster(); 
});

我沒有實際測試此代碼，但這應該幫助你。

來源

2014-10-02 14:21:16 Y0lk

不錯的主意做到這一點的代碼，但現在我得到這個錯誤「你對未初始化的元素稱爲Tooltipster的」銷燬「方法」...我試着將原來的調用移動到tooltipster到頁面的頭部（原本在底部），但得到相同的錯誤... – Dog 2014-10-05 09:00:23

作爲替代，你可以使用DOMNodeInserted事件，但該事件將被刪除，不知道跨瀏覽器的支持。

$('body').on('DOMNodeInserted', '.tip1', function(e) { 
    $(e.target).tooltipster(); 
});

來源

2014-10-02 17:17:07

如何將jquery函數應用於ajax加載的內容

回答

相關問題