JQuery嵌套li/ul动态元素点击失效问题求助

这个问题的核心是事件绑定的时机和事件委托的正确使用方式，我来帮你拆解和解决：

为什么原来的代码失效？ #

你最初用$(".li-selectable").click(...)绑定事件，这种方式只会给页面加载时已经存在的.li-selectable元素绑定点击事件。动态创建的元素是在页面加载后生成的，自然不会有这个事件绑定，所以点击没反应。

你尝试用body作为委托元素，虽然能解决部分问题，但嵌套ul内的元素失效，大概率是因为事件冒泡在传递过程中被Expandable List插件或者其他元素拦截了，选择更接近目标元素的静态父元素会更可靠。

正确的解决方案 #

我们可以利用jQuery的事件委托机制，把事件绑定到页面加载时就存在的静态父元素（比如你的最外层列表#layers_list_group），然后委托给.li-selectable元素。同时优化选中逻辑，确保只操作目标元素：

// 替换原来的click绑定代码
$("#layers_list_group").on("click", ".li-selectable", function(e) {
    // 确保我们操作的是.li-selectable元素（避免点击子元素时出错）
    const $target = $(e.target).closest(".li-selectable");
    if ($target.hasClass("active")) {
        $(".li-selectable").removeClass("active");
    } else {
        $(".li-selectable").removeClass("active");
        $target.addClass("active");
    }
});

代码解释 #

1. 事件委托到静态父元素：#layers_list_group是页面加载就存在的元素，所有动态生成的.li-selectable元素都是它的后代，事件会通过冒泡传递到这里，所以动态元素也能触发事件。
2. 用closest()锁定目标：e.target是实际点击的DOM节点，用closest(".li-selectable")可以确保即使点击到li内部的文本或子元素，也能正确找到对应的.li-selectable元素。
3. 保持原有选中逻辑：移除所有元素的active类，再给当前选中的元素添加，和你原来的逻辑一致。

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