如何在AJAX內容加載後重新附加jQuery函數？

有跡象表明，我把這種方式的幾個jQuery UI的功能：如何在AJAX內容加載後重新附加jQuery函數？

jQuery(document).ready(function(){ 
    jQuery(".accordion").accordion(); 
});

但我的頁面是基於AJAX和某些網頁可能使用手風琴，有些人可能不使用它。有30多個其他功能需要重新連接，這是一個有問題的開發任務。有沒有什麼聰明的方法來解決這個問題，以便每個新的.accordion都能自動連接這個附件？

可能的解決方案，以及爲什麼他們會無法正常工作：

觸發AJAX調用完成文檔準備好將是理想的，但是這是不可能有load()
是不是一種選擇，因爲它是一個CMS，用戶可以安裝插件 - 這意味着插件只能使用未知函數jQuery(document).ready();
重新附加函數ajaxComplete - 未知函數的數量未知，如果不在每次安裝或卸載jQuery時修改AJAX腳本插件

來源

2013-02-04 Atadj

您正在構建一個單一的webapp？你有沒有考慮像Backbone這樣的框架？ – Mathletics

仔細調用'$（「。accordion」）。accordion（）'多次，因爲插件無法正確處理同一元素上的多個初始化。爲了安全起見，我建議只限制對新內容的呼叫，例如， '$（「＃newContent .accordion」）。accordion（）' – Mahn

@Mahn好主意！ – Atadj

您可以使用DOMNodeInserted事件並檢查手風琴類。

document.addEventListener('DOMNodeInserted', function(e) { 
    var el = $(e.target); 
    if(el.hasClass('accordion')) { 
     el.accordion(); 
    } 
});

使用例DOMNodeInserted的：http://jsfiddle.net/qErHs/

來源

2013-02-04 18:48:06

我喜歡這個解決方案:)但是，我得出的結論是，僅僅禁用AJAX會更簡單。這會在視覺上更糟，但技術上更好。 – Atadj

僅供參考DOMNodeInserted已棄用，由於性能影響和跨瀏覽器兼容性問題而不鼓勵使用，請參閱：https：//developer.mozilla.org/en-US/docs/DOM/Mutation_events – Mahn

@Paul不要棄用ajax，你的解決方法可以像編寫一個通用的'contentReloaded'函數一樣簡單，重新初始化所有必要的插件，然後在任何ajax回調的完整/成功回調中始終調用它。這是我通常會做的，它不是特別沉重，而且很有效。（你只需要記住在添加新插件時更新它） – Mahn

您可以檢查「.accordeon」長度。只需創建一個功能...

function init_accordeon(){ 
    if($('.accordeon').length) { 
     $(".accordon").accordeon(); 
    } 
}

而不是在你的ajax_calls之後調用這個函數。

來源

2013-02-04 17:51:19

這次30個函數不是我要找的。我需要它自動發生。像'load（）'一樣。 – Atadj

您只需要1個功能。請檢查http://api.jquery.com/ajaxComplete/每次調用它，當你的ajax_request完成時 –

是的，但我不想在AJAX請求完成後調用任何東西。我在文檔準備中有未知數量的未知函數（用戶可以添加他自己的函數），所以他每次註冊一個新的jQuery插件時都必須修改ajaxComplete。 – Atadj

我有一個與jQuery小部件類似的問題。我所做的是使用ajaxComplete方法來附加小部件。

$(document).ajaxComplete(function() 
    { 
     $(".accordion").accordion(); 
    });

這樣，函數被調用每一次的AJAX方法完成並會手風琴重視與類手風琴任何新的元素

來源

2013-02-04 17:53:51 ShaneA

感謝您的答案，但這正是我想避免:)我只是不知道有多少功能和需要連接哪些功能，因爲這動態變化..理想的解決方案是觸發'準備就緒' - 這將覆蓋我需要的一切，但這是不可能的。 – Atadj

不知道它是否更好，但我之前做了什麼ajaxComplete，有內聯JS在AJAX調用返回什麼特定的jQuery東西的HTML返回 – ShaneA

@Paul你可以包裝你的document.ready在一個單獨的功能（比如'startUI（）'），然後在document.ready和ajax調用完成時調用它。但是，分別處理document.ready和content reload可能是一個更好的主意。 – Mahn

http://api.jquery.com/on/

「委託事件有優勢，他們可以處理後來添加到文檔中的後代元素的事件。「

jQuery(document).on("change", ".accordion", function() { 
    jQuery(".accordion").accordion(); 
});

來源

2013-02-04 18:11:14 isherwood

謝謝！這是第一個建議，將至少修復一部分功能:)但你的例子應該是這樣的：''jQuery（document）.on（'click'，'.selector'，function（）{}）;'因爲' on（）'只能這樣工作。 – Atadj

而且......它不應該發生在點擊上，而是在元素的外觀上。 – Atadj

你說得對。當我在工作中遇到麻煩時，我把它扔掉了。抱歉。我已經更新了我的答案並切換到了更改（）。 – isherwood

可以觸發Ajax調用後自定義事件。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>on demo</title> 
    <style> 
    p { 
    color: red; 
    } 
    span { 
    color: blue; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p>Has an attached custom event.</p> 
<button>Trigger custom event</button> 
<span style="display:none;"></span> 

<script> 
$("p").on("myCustomEvent", function(event, myName) { 
    $(this).text(myName + ", hi there!"); 
    $("span") 
    .stop() 
    .css("opacity", 1) 
    .text("myName = " + myName) 
    .fadeIn(30) 
    .fadeOut(1000); 
}); 
$("button").click(function() { 
    $("p").trigger("myCustomEvent", [ "John" ]); 
}); 
</script> 

</body> 
</html>

來源

2017-01-06 17:17:18

如何在AJAX內容加載後重新附加jQuery函數？

回答

相關問題