Electron中动态创建带子项的复选框列表，jQuery多选脚本仅加debugger时生效

我一看你这个情况就懂了——这妥妥是动态元素的事件绑定时机出问题了！

你现在用的$('input[type=checkbox]').click()是在window.load时直接给当时已经存在的复选框绑定点击事件，但你的复选框是后来用JS动态创建出来的，这些新生成的元素根本没被绑定到事件，自然没反应。那为啥加debugger就好使？因为debugger会暂停代码执行，这时候你的动态元素已经创建完成了，再执行事件绑定的时候就能抓到这些元素了。

给你几个靠谱的解决方案：

1. 使用事件委托（最推荐） #

把事件绑定到页面一开始就存在的父元素上，利用事件冒泡特性来触发动态元素的事件。比如假设你的复选框都放在一个id="checkbox-container"的容器里（如果没有的话，也可以用document或者body作为父容器，但尽量找最近的静态父元素，性能更好）：

$(window).on('load', function (e) {
  // 用on()绑定事件委托，监听父容器下的复选框点击
  $('#checkbox-container').on('click', 'input[type=checkbox]', function(){
    if(this.checked){
      // 这里把children()换成find()，能找到所有后代复选框，适配嵌套结构
      $(this).parents('li').find('input[type=checkbox]').prop('checked', true);
    } else {
      // 可选：取消勾选时同步取消子项，根据你的需求调整
      $(this).parents('li').find('input[type=checkbox]').prop('checked', false);
    }
  });
});

这种写法的核心是把事件绑定到静态父元素上，不管之后动态生成多少复选框，只要在这个父容器里，点击事件都会被正确触发。

2. 动态创建元素后立刻绑定事件 #

如果你不想用事件委托，也可以在每次用JS动态创建完复选框之后，马上给新创建的元素绑定点击事件。比如你创建元素的代码大概是这样的：

// 示例：动态创建复选框项的函数
function createCheckboxItem(text) {
  const li = $('<li><input type="checkbox"> ' + text + '</li>');
  // 给新创建的复选框绑定事件
  li.find('input[type=checkbox]').click(function(){
    if(this.checked){
      $(this).parents('li').find('input[type=checkbox]').prop('checked', true);
    } else {
      $(this).parents('li').find('input[type=checkbox]').prop('checked', false);
    }
  });
  $('#checkbox-container').append(li);
}

这种方法的缺点是如果多次创建元素，会重复绑定事件，代码也比较冗余，不如事件委托优雅。

3. 调整Electron中的DOM加载时机 #

另外提一句，在Electron里有时候window.load可能不是最精准的初始化时机，你可以试试用document.addEventListener('DOMContentLoaded', ...)代替$(window).on('load')，或者在主进程里用webContents.on('dom-ready', ...)来触发初始化逻辑，但这只是辅助优化，核心问题还是动态元素的事件绑定方式。

最后补个小提醒：你原代码里的$(this).parents('li').children('input[type=checkbox]')选择器可能有问题——children()只会选中直接子元素，如果你的子复选框是嵌套在更深层级里的，一定要换成find()才能找到所有后代的复选框。

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