Question

我用这种方式调用了一些jQuery UI函数：

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

但是我的页面是基于AJAX的，有些页面可能会使用手风琴，有些页面可能不会使用它。还有30多个其他功能需要重新附加，这是一个有问题的开发任务。有没有聪明的方法来解决这个问题，以便每个新的.accordion自动附加这个？

可能的解决方案及其无效的原因：

在AJAX调用完成时触发文档准备就绪是理想的，但这是不可能的
不能选择load()，因为它是用户可以安装插件的CMS - 这意味着插件仅使用jQuery(document).ready();
重新附加ajaxComplete上的函数 - 未知函数数量未知，如果不在每次安装或卸载jQuery插件时修改AJAX脚本，这将无效

Answer 1

您可以使用DOMNodeInserted事件并检查手风琴类。

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

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

Answer 2

我有一个与jQuery小部件类似的问题。我所做的是使用ajaxComplete方法来附加小部件。

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

这样，每次AJAX方法完成时都会调用该函数，并将手风琴附加到任何带有手风琴的新元素

Answer 3

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

“委托事件的优势在于它们可以处理来自稍后添加到文档中的后代元素的事件。”

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

Answer 4

您可以检查“.accordeon”-length。只需创建一个函数......

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

然后在你的ajax_calls之后调用这个函数。

Answer 5

你可以在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>

如何在AJAX内容加载后重新附加jQuery函数？

5 个答案: