使用jQuery .append()实现递归添加元素的问题咨询

这个问题其实很常见——你用.click()绑定事件的时候，它只会给页面初始加载时就存在的.plus_sign元素绑定点击逻辑，后来通过append动态添加的新按钮，根本没被绑定事件，自然点了没反应。

最优雅的解决方案是用事件委托（Event Delegation），原理是把事件绑定到一个已经存在的父级元素（甚至document）上，利用事件冒泡的特性，来处理动态添加的子元素的点击。修改后的代码如下：

// 把事件绑定到document（或者更接近的父容器，比如#country，效率更高）
$(document).on('click', '.plus_sign', function() {
  // 注意：你原来的$("country")是错误的选择器！这里要改成对应容器的id/class选择器
  $("#country").append(`<div> 
    <select name="" id=""> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
    </select> 
    <input type="text"> 
    <i class="fa fa-plus plus_sign"></i> 
  </div>`); 
});

几个关键点说明： #

• 事件委托的核心是$(父元素).on('事件类型', '目标选择器', 处理函数)，这样不管是初始的还是后来动态添加的.plus_sign，点击时事件都会冒泡到父元素，从而触发处理逻辑。
• 优先选择最接近目标元素的父容器（比如如果你的country是一个id为country的div，就用$("#country").on(...)），比绑定到document上效率更高。
• 你原来代码里的$("country")是错误的，这会去找<country>标签，一定要改成$("#country")（id选择器）或者$(".country")（类选择器），否则append操作根本不会生效。

另外还有一种方案，就是每次添加新元素后，手动给新的.plus_sign绑定事件，但这种方式代码更繁琐，不如事件委托简洁：

// 先给初始的按钮绑定事件
$('.plus_sign').click(addNewCountryItem);

function addNewCountryItem() {
  // 先创建新元素
  const newItem = $(`<div> 
    <select name="" id=""> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
      <option value="">sdfasfdasd</option> 
    </select> 
    <input type="text"> 
    <i class="fa fa-plus plus_sign"></i> 
  </div>`);
  
  // 添加到容器
  $("#country").append(newItem);
  
  // 给新添加的按钮绑定事件
  newItem.find('.plus_sign').click(addNewCountryItem);
}

不过还是更推荐事件委托的方案，尤其是当你需要频繁添加元素的时候，它的代码维护性和性能都更好。

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