1

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

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

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

可能的解决方案以及为什么它们不起作用：

  • 在 AJAX 调用完成时触发文档就绪是理想的，但这是不可能的
  • 拥有load()不是一个选项，因为它是一个 CMS，用户可以在其中安装插件 - 这意味着插件添加的未知功能数量未知jQuery(document).ready();
  • 重新附加功能ajaxComplete- 对于未知数量的未知功能，每次安装或卸载 jQuery 插件时，如果不修改 AJAX 脚本，这将无法工作
4

5 回答 5

5

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

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

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

于 2013-02-04T18:48:06.120 回答
3

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

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

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

于 2013-02-04T17:53:51.253 回答
1

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

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

jQuery(document).on("change", ".accordion", function() {
  jQuery(".accordion").accordion();
});
于 2013-02-04T18:11:14.727 回答
0

您可以检查“.accordeon”的长度。只需创建一个函数...

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

而不是在你的 ajax_calls 之后调用这个函数。

于 2013-02-04T17:51:19.527 回答
0

您可以在 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-06T17:17:18.083 回答