使用jQuery构建多层级Div树形结构：动态添加元素失效问题求助

这个问题我之前也碰到过！核心原因是jQuery的直接事件绑定只对页面加载时已经存在的DOM元素生效，你动态生成的.attribute_lv1_plus元素是在页面加载后才添加的，所以之前绑定的click事件根本没作用在它身上。另外你的代码里还有个隐藏坑：多个元素用了同一个id="orange"，HTML里ID必须是唯一的，这会导致选择器失效，得先把这个问题Fix掉。

第一步：修复ID重复问题 #

把所有重复的id="orange"改成class="orange"，ID在HTML中必须唯一，重复会导致选择器和JS行为异常：

• 初始的.header_plus#orange改为.header_plus.orange
• 动态生成的.attribute_lv1_plus#orange改为.attribute_lv1_plus.orange
• 同理，其他带id="orange"的元素都替换为class属性。

第二步：用事件委托绑定点击事件 #

使用jQuery的.on()方法实现事件委托，把事件绑定到一个始终存在的父元素上（比如最外层的.left_navigation），让它监听子元素的点击事件。这样不管元素是初始就存在还是动态生成的，只要符合选择器，事件都会被触发。

修改后的完整代码示例：

// 绑定初始橙色加号的点击事件
$(".left_navigation").on('click', '.header_plus.orange', function() {
  // 动态生成Lv1元素，注意已将id="orange"改为class="orange"
  $(".row#header_orange").after(`<div class="row" id="attribute_lv1_orange">
    <div class="attribute_lv1_line">
      <div class="attribute_lv1_color orange"></div>
      <div class="attribute_lv1_prespace_lv1"></div>
      <div class="attribute_lv1_given orange">
        <input class="new_attribute_text_lv1_orange" type="text" value="New Attribute" onclick="changeContent()">
      </div>
      <div class="attribute_lv1_plus orange"><p>+</p></div>
    </div>
  </div>`);
  
  // 生成测试数据，用递增数字避免ID重复
  let testDataCount = 0;
  $(".blank_orange").after(`<div class="row" id="testdata_${testDataCount++}">
    <div class="testcase_data">
      <input class="new_data_input" type="text" value="+" onclick="changeContent()">
    </div>
  </div>`);
});

// 绑定动态生成的Lv1橙色加号的点击事件
$(".left_navigation").on('click', '.attribute_lv1_plus.orange', function() {
  // 用closest()找到当前元素所在的row，避免依赖固定ID
  $(this).closest('.row').after(`<div class="row" id="attribute_lv2_orange">
    <div class="attribute_lv2_line">
      <div class="attribute_lv2_color orange"></div>
      <div class="attribute_lv2_prespace_lv2"></div>
      <div class="attribute_lv2_given orange">
        <input class="new_attribute_text_lv2_orange" type="text" value="New Attribute" onclick="changeContent()">
      </div>
      <div class="attribute_lv2_plus orange"><p>+</p></div>
    </div>
  </div>`);
  
  let testDataCount = 0;
  $(".blank_orange").after(`<div class="row" id="testdata_${testDataCount++}">
    <div class="testcase_data">
      <input class="new_data_input" type="text" value="+" onclick="changeContent()">
    </div>
  </div>`);
});

额外优化说明 #

• 用$(this).closest('.row')替代固定ID选择器，让代码更灵活，避免后续层级扩展时的ID依赖问题。
• 给动态生成的testdata添加递增数字后缀，避免重复ID导致的DOM异常。

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