Jquery 函数不应用于页面加载时动态加载的元素

我有一个手风琴菜单，当点击链接头时，它会加载带有二级链接的页面

单击时，在加载HTML元素之前加载

.on（'click'）

，因此我必须单击链接标题两次才能打开手风琴菜单

$('.accordion-menu > li > a').on('click', function (e) {

    if ($(this).siblings('ul').length) {
        e.preventDefault();
        if ($(this).closest('li').hasClass('active')) {
            $(this).siblings('ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });
        } else {
            $(this).closest('.accordion-menu').find('> li.active ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });

            $(this).siblings('ul').slideDown('normal', function () {

            });
            $(this).closest('li').addClass('active');
        }
    }
});

HTML

当我点击标题时，它应该加载页面并添加如下所示的活动类

但现在它实际上只是加载页面并创建元素，而没有添加活动类。
请参见下面的“找工作”

因此在JQuery函数中（

$（this）.sibbines（'ul'）.length

）第一次为0，因此没有添加任何类…
当我第二次单击标题时，类被添加，手风琴工作正常

我尝试更改

$（'.accordion menu>li>a'）。在（'click'，函数（e）{

，但没有帮助…
尝试在XSLT（文件末尾）中添加函数，目前它位于单独的JS文件中

---

谢谢

您的代码可以工作，但是如果元素是动态创建的，那么事件应该附加到父级（如果在页面加载时加载.accordion菜单，然后动态添加其中的链接），您可以这样做：

如果整个手风琴菜单动态加载到页面中，您可以这样做

---

您可以阅读有关使用委托的更多信息。请查看其不起任何作用。感谢您提供详细示例。单击标题标题标题时，页面将加载，看起来像

但必须显示：block和class=“active”对于第一个

。手风琴菜单不是动态加载的，只有链接下的

部分在页面加载时加载。因此，我希望在加载期间附加事件，以便在单击标题标题之前，手风琴在第一次单击时打开，就像
。因此，当单击时，它会加载带有
的页面

$('.accordion-menu').on('click', 'a', function (e) {

    if ($(this).siblings('ul').length) {
        e.preventDefault();
        if ($(this).closest('li').hasClass('active')) {
            $(this).siblings('ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });
        } else {
            $(this).closest('.accordion-menu').find('li.active ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });

            $(this).siblings('ul').slideDown('normal', function () {

            });
            $(this).closest('li').addClass('active');
        }
    }
});

$('body').on('click', '.accordion-menu a', function (e) {

    if ($(this).siblings('ul').length) {
        e.preventDefault();
        if ($(this).closest('li').hasClass('active')) {
            $(this).siblings('ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });
        } else {
            $(this).closest('.accordion-menu').find('li.active ul').slideUp('normal', function () {
                $(this).closest('li').removeClass('active');
            });

            $(this).siblings('ul').slideDown('normal', function () {

            });
            $(this).closest('li').addClass('active');
        }
    }
});