使用jQuery上传图片刷新DIV预览后JS失效的解决咨询

问题原因 #

你一开始给页面上id以delete-开头的按钮绑定了点击事件，但通过$.get刷新#list_media_gallery之后，新生成的删除按钮是动态添加的DOM元素——初始的事件绑定只对页面加载时就存在的元素生效，这些新按钮自然触发不了事件。

解决办法：用jQuery事件委托 #

把事件绑定到一个页面加载时就存在的父元素（比如#list_media_gallery本身），借助事件冒泡来监听动态元素的点击。

代码示例 #

假设你原来的绑定代码是这样的：

$('[id^="delete-"]').click(function() {
  // 你的删除逻辑
});

直接改成事件委托的写法：

// 绑定到#list_media_gallery，监听内部id以delete-开头的按钮点击
$('#list_media_gallery').on('click', '[id^="delete-"]', function() {
  // 这里写你的删除逻辑，比如拿到图片ID：
  var imgId = $(this).attr('id').split('-')[1];
  // 执行删除的AJAX操作等
});

原理说明 #

事件委托靠的是DOM的事件冒泡：点击动态生成的按钮时，事件会往上传到父元素#list_media_gallery，而我们在父元素上提前监听了这个事件，并且指定只处理目标是id以delete-开头的元素，不管后续怎么刷新这个DIV里的内容，新按钮都能触发事件。

小提示 #

• 尽量选离目标元素最近的稳定父级绑定事件，别直接绑到document上（虽然能用，但会多一层冒泡，影响性能）。
• 如果删除操作后也要刷新DOM，记得相关的事件处理也用委托方式，避免再踩同样的坑。

内容的提问来源于stack exchange，提问作者Uituceală M.O.D