PHP循环中绑定的jQuery点击事件触发多次alert该如何解决

你的点击事件绑定代码放在了fetch()函数末尾，每次调用fetch()拉取Feeds数据时，都会给页面上所有已存在的.show_more按钮新增一次点击事件监听，且没有移除旧的监听。点击按钮时，所有绑定过的回调都会依次执行，所以单次点击会弹出多次alert。

方案1：快速修复 #

在绑定新事件前先移除旧的同名事件，修改你fetch()函数输出的script部分即可：

$('.show_more').off('click').on('click', function (e) {
  e.preventDefault(); 
  alert("Helloworld"); 
});

off('click')会先清空所有.show_more上已绑定的点击事件，再绑定新的事件，避免重复触发。

方案2：最优实现（推荐） #

使用事件委托机制，将事件绑定到页面中不会被动态替换的静态父容器上（如果没有合适的父容器直接用document即可），这段绑定代码只需要在页面首次加载时执行1次，不要放在fetch()函数内随每次拉取数据重复执行：

// 写在页面全局script标签中，页面加载完成后执行一次即可
$(document).on('click', '.show_more', function(e) {
  e.preventDefault();
  alert("Helloworld");
  // 后续加载更多的业务逻辑直接写在这里即可
});

事件委托利用事件冒泡机制由父元素代为处理子元素的点击事件，不管后续动态新增多少个.show_more按钮都能正常触发事件，从根源上避免重复绑定问题。

• 你循环生成的隐藏input使用了固定idfixs/MinValue/MaxValue，同一页面内id属性不能重复，会导致后续取数逻辑出错，建议改为class属性，或者拼接$postID生成唯一id。
• 全局通用的事件绑定逻辑不要和动态数据渲染逻辑混写，只需要在页面初始化时执行一次即可。

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