javascript - jQuery SlideDown 不适用于具有动态分配 id 的元素

Question

编辑:我稍微清理了代码并缩小了问题范围。

所以我正在开发一个 Wordpress 网站，并且我正在尝试将下拉菜单合并到移动设备上的菜单中，这意味着我必须使用 jQuery 将类和 id 分配给我已经存在的元素。我的这段代码已经可以在预制 HTML 上运行，但在动态创建的 id 上失败。

这是代码:

...
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
    console.log(submenus);
    submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
    submenus.each(function() {
        $(this).attr("href", "#m" + menuCount++);
    })
    var content = submenus.parent().find('ul.sub-menu');
    content.addClass('dropdown-content');
    content.each(function() {
        $(this).attr("id", "m" + contentCount++);
    })
}

$(document).on('click', '.dropdown-title', function(e) {
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
        $(this).removeClass('d-active');
        $(currentAttrValue).slideUp(300).removeClass('d-open');
    } else {
        $('.dropdown-title').removeClass('d-active');
        $('.dropdown-content').slideUp(300).removeClass('d-open');
        $(this).addClass('d-active');
        console.log($(currentAttrValue));

        //THIS LINE FAILS
        $(currentAttrValue).slideDown(300).addClass('d-open');
    }

    e.preventDefault();

});

我已经使用 $(document).on(...) 向 dropdown-title 类注册了元素，但我不知道我要做什么需要用自定义 ID 注册元素。我尝试将事件回调放入 .each 函数中，我尝试过触发自定义事件，但它们都不会触发倒数第二行代码。控制台中没有错误，当我通过控制台记录选择器时，我得到以下信息:

[ul#m0.sub-menu.dropdown-内容，上下文:文档，选择器:“#m0”] 0 : ul#m0.sub-menu.dropdown-内容 语境 : 文档 长度 : 1 选择器 : “#m0” 原型(prototype) : 对象[0]

所以 jQuery 知道该元素在那里，我只是不知道如何注册它......或者也许这是我没有想到的东西，我不知道。

Answer 1

如果您要动态创建元素，则应在创建这些元素后分配 .on 'click'。只需在添加 id 和类之后而不是在页面加载时声明您发布的“点击时”回调代码，这样它就会通过 .dropdown-title 类附加到元素。

检查这个jsFiddle:https://jsfiddle.net/6zayouxc/

编辑:您编辑的 JS 代码有效...您的 HTML 或 CSS 也可能存在一些问题，您是否隐藏了子菜单？确保您没有将它们设置为透明。