为何jQuery无法为新增的第二个联系人div生效display属性？

这个问题我之前也碰到过，核心原因是动态生成的元素没有绑定事件，咱们一步步来解决：

问题根源 #

当你页面加载完成后，直接给.hide-btn或.show-btn绑定click事件时，只有当时DOM中已经存在的元素（也就是第一个联系人的按钮）会被绑定事件。而第二个联系人是你后续动态添加到页面的，这些新元素并没有被绑定上之前的点击事件，所以点击后自然没有反应。

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

我们可以利用jQuery的事件委托机制，把事件绑定到一个页面加载时就存在的父元素上（比如你的#contact div），让父元素监听子元素的点击事件，这样不管是一开始就有的元素，还是后来动态添加的元素，都能触发对应的操作。

代码示例 #

假设你原来的事件绑定代码是这样的（只对初始元素有效）：

// 原来的写法：仅对页面加载时存在的元素生效
$('.hide-btn').click(function() {
  $(this).closest('.contact-item').hide();
});

$('.show-btn').click(function() {
  $(this).closest('.contact-item').show();
});

改成事件委托的写法后：

// 事件委托写法：对所有当前及未来的匹配元素生效
$('#contact').on('click', '.hide-btn', function() {
  $(this).closest('.contact-item').hide();
});

$('#contact').on('click', '.show-btn', function() {
  $(this).closest('.contact-item').show();
});

为什么这样有效？ #

on()方法的事件委托逻辑是：

1. 把点击事件绑定到#contact这个父元素上，它是页面加载时就存在的DOM节点。
2. 当你点击任何子元素时，事件会冒泡到#contact。
3. jQuery会检查触发事件的元素是否匹配第二个参数里的选择器（比如.hide-btn）。
4. 如果匹配，就执行对应的回调函数。

这样一来，不管你后续添加多少个联系人和对应的按钮，只要它们在#contact里面，点击hide/show按钮都会正常触发显示/隐藏操作。

额外注意事项 #

• 父元素一定要是页面加载时就存在的，不能是动态生成的元素，否则事件委托也会失效。
• 选择器要准确，确保能精准定位到你的hide/show按钮，避免误触发其他元素的事件。

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