加载AJAX内容后如何重新附加jQuery函数？
[英]How to re-attach jQuery functions after AJAX content load?
问题描述
There are a few jQuery UI functions that I call this way: 
我用这种方式称呼一些jQuery UI函数：
jQuery(document).ready(function(){
jQuery(".accordion").accordion();
});
But my page is AJAX based and some pages may use accordion, some may not use it. 但是我的页面是基于AJAX的，有些页面可能会使用手风琴，有些页面可能会不使用它。 There are like 30+ other functions that would need to be re-attached which is a problematic development task. 大约有30多个其他功能需要重新连接，这是一个有问题的开发任务。 Is there any clever way to fix this so that every new .accordion gets this attached automatically? 有什么聪明的方法可以解决此问题，以便每个新的.accordion都能自动获得此附件？
Possible solutions and why they won't work: 可能的解决方案以及它们为何不起作用：
- triggering document ready on AJAX call finish would be ideal but that's not possible 最好在AJAX通话完成时触发文档准备就绪，但这是不可能的
- having
load()is not an option because it's a CMS where users can install plugins - that means unknown number of unknown functions that plugins add only usingjQuery(document).ready();不能选择load()因为这是一个CMS，用户可以在其中安装插件-这意味着未知数量的未知函数，这些插件只能使用jQuery(document).ready(); - re-attach functions on
ajaxComplete- with unknown number of unknown functions this won't work without modifying AJAX script each time you install or uninstall a jQuery plugin在ajaxComplete上重新附加函数-具有未知数量的未知函数，每次安装或卸载jQuery插件时，如果不修改AJAX脚本就无法使用
5 个解决方案
解决方案1
4 已采纳 2013-02-04 18:48:06
You can use the DOMNodeInserted event and check for the accordion class. 您可以使用DOMNodeInserted事件并检查手风琴类。
document.addEventListener('DOMNodeInserted', function(e) {
var el = $(e.target);
if(el.hasClass('accordion')) {
el.accordion();
}
});
Example use of DOMNodeInserted: http://jsfiddle.net/qErHs/ DOMNodeInserted的使用示例： http : //jsfiddle.net/qErHs/
解决方案2
3 2013-02-04 17:53:51
I have a similar issue with jQuery widgets. jQuery小部件也有类似问题。 What I did was use the ajaxComplete method to attach the widgets. 我所做的是使用ajaxComplete方法附加小部件。
$(document).ajaxComplete(function()
{
$(".accordion").accordion();
});
that way, the function gets called every time an AJAX method is complete and will attach the accordion to any new elements with class accordion 这样，每次AJAX方法完成时都会调用该函数，并将手风琴附加到具有手风琴类的任何新元素上
解决方案3
1 2013-02-04 18:11:14
http://api.jquery.com/on/ http://api.jquery.com/on/
"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time." “委派的事件的优势在于，它们可以处理以后在文档中添加的后代元素中的事件。”
jQuery(document).on("change", ".accordion", function() {
jQuery(".accordion").accordion();
});
解决方案4
0 2013-02-04 17:51:19
You can check for ".accordeon"-length. 您可以检查“ .accordeon”长度。 Just create a function... 只需创建一个函数...
function init_accordeon(){
if($('.accordeon').length) {
$(".accordon").accordeon();
}
}
and than call this function after your ajax_calls. 然后在您的ajax_calls之后调用此函数。
解决方案5
0 2017-01-06 17:17:18
you can trigger custom events after ajax call. 您可以在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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.