使用innerHTML添加dropdown-submenu时click事件无法触发问题求助

问题原因 #

你通过innerHTML动态添加的.dropdown-submenu > a元素，是在事件绑定代码执行之后才生成的。直接用$('.dropdown-submenu > a').on("click", ...)只能给绑定代码执行时已存在的元素绑定事件，动态新增的元素不会继承这个事件绑定，所以点击事件无法触发。

解决方案：使用jQuery事件委托 #

把事件绑定到一个页面加载时就存在的父级元素上（比如你的#btnBookmarkMenu或外层.dropdown），通过事件委托监听动态元素的点击事件。

修改后的JavaScript代码如下：

var bookmarkMenu = document.getElementById("btnBookmarkMenu");

// 动态插入菜单内容
bookmarkMenu.innerHTML = '<li class="dropdown-item dropdown-submenu"><a href="#" data-toggle="dropdown">Submenu-1</a><ul class="dropdown-menu"><li class="dropdown-item"><a href="#">Item-1</a></li><li class="dropdown-item"><a href="#">Item-2</a></li><li class="dropdown-item"><a href="#">Item-3</a></li></ul></li>' + bookmarkMenu.innerHTML;

// 改用事件委托，绑定到静态父元素#btnBookmarkMenu
$('#btnBookmarkMenu').on("click", '.dropdown-submenu > a', function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show');
    submenu.next('.dropdown-menu').addClass('show');
    e.stopPropagation();
});
    
$('.dropdown').on("hidden.bs.dropdown", function() {
    // 父菜单关闭时隐藏所有展开的子菜单
    $('.dropdown-menu.show').removeClass('show');
});

代码说明 #

• 事件委托利用事件冒泡机制：点击动态元素时，事件会冒泡到父级静态元素，父级元素再判断触发事件的目标是否匹配.dropdown-submenu > a选择器，匹配则执行回调函数。
• 必须选择页面初始就存在的父元素作为委托对象，比如#btnBookmarkMenu从一开始就在HTML结构中，能确保事件委托稳定生效。

内容的提问来源于stack exchange，提问作者sush