使用通配符的.on('click')事件委托未按预期生效

嗨，这个问题我太熟了——这是典型的动态元素事件绑定失效的情况，我来给你拆解清楚原因和解决办法：

问题根源 #

你当前用的事件绑定代码：

$("[id^='imgid_']").on( "click", function() { 
    alert('you clicked me'); 
});

是直接把点击事件绑定到页面初始加载时已经存在的id以imgid_开头的元素上。而通过AJAX请求追加的新元素，是在这段代码执行之后才被添加到DOM里的，所以这些新元素根本没被绑定到点击事件处理器，自然点击没反应。

解决方案：事件委托（利用事件冒泡） #

解决这个问题的核心思路是用事件委托——把事件绑定到一个页面加载时就存在的稳定父元素（比如document、body，或者离目标元素更近的固定容器），然后通过选择器筛选出真正要触发事件的目标元素。

示例代码：

// 推荐绑定到离目标元素近的稳定父元素，这里用document做兜底示例
$(document).on('click', "[id^='imgid_']", function() {
    alert('you clicked me');
});

如果你的动态元素都是被追加到某个固定的容器里（比如你代码里的append_here_$x对应的div），那用这个容器作为父元素会更高效：

// 假设动态元素都追加到id为append_here_1的容器中（根据你的实际循环变量调整）
$("#append_here_1").on('click', "[id^='imgid_']", function() {
    alert('you clicked me');
});

原理说明 #

事件委托利用了DOM的事件冒泡机制：当你点击动态生成的元素时，点击事件会沿着DOM树向上冒泡到你绑定事件的父元素，这时jQuery会检查触发事件的元素是否匹配你指定的选择器[id^='imgid_']，如果匹配就执行回调函数。这样不管是初始元素还是后续AJAX追加的新元素，都能被正确触发。

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