JQuery .on函数不适用于在页面加载时动态加载的元素

Question

我有一个手风琴菜单，当点击链接标题时，它会加载带有辅助链接的页面。

单击时，在加载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

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

但现在它实际上只是加载页面并创建了元素，不添加类活动 见下文＆＃34;找工作＆＃34;

所以在JQuery函数（$(this).siblings('ul').length）中第一次出现0，所以没有添加任何类...
当我第二次点击标题时，添加了类，手风琴正常工作。

我尝试更改$('.accordion-menu > li > a').on('click',function (e) {，但没有帮助......
尝试在XSLT（文件末尾）中添加函数，目前它在单独的JS文件中。

由于

Answer 1

您的代码可以正常运行，但如果元素是动态创建的，则事件应附加到父级（如果在页面加载时加载.accordion菜单，然后动态添加内部链接），您可以这样做：{{ 3}}

$('.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');
        }
    }
});

如果将整个手风琴菜单动态加载到页面中，您可以将其设为http://jsfiddle.net/56fg39he/

$('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');
        }
    }
}); 

您可以阅读有关http://jsfiddle.net/56fg39he/1/

的更多信息