JQuery按钮点击事件重复触发（Alert次数递增）求助

看起来你踩了重复绑定事件监听的坑，这也是新手用jQuery时很容易犯的错误，我来帮你拆解问题并给出修复方案：

问题根源 #

你的hi()函数每次被按钮点击调用时，都会执行$('button').on('click', ...)——这相当于给页面上所有按钮再添加一次点击事件处理函数。第一次点击后，按钮绑定了1个处理函数；第二次点击时，之前的1个加上新绑定的1个，总共触发2次；第三次就会触发3次，以此类推，弹出次数自然越来越多。

另外，$(document).ready()在页面加载完成后就已经执行过了，把它放在hi()函数里完全没有意义，只会在第一次调用hi时执行里面的绑定逻辑，之后只会重复执行事件绑定的代码。

修复方案 #

我们要把事件绑定逻辑从hi()里抽出来，让它只在页面加载完成时执行一次；同时去掉按钮上的onclick属性，直接通过事件监听获取按钮的data数据：

修正后的jQuery代码 #

<script>
// 页面加载完成后，只绑定一次点击事件
$(document).ready(function() {
  $('button.btn-danger').on('click', function() {
    const $btn = $(this);
    // 获取按钮的data属性数据
    const id = $btn.data('id');
    const manjarData = $btn.data('manjar');
    
    console.log(id, $btn[0].dataset.id, manjarData);
    alert("It is done once!");
  });
});
</script>

修正后的PHP代码 #

$i = 0;
foreach($arr as $data ){
  $iterator = new RecursiveIteratorIterator(new RecursiveArrayIterator($data), RecursiveIteratorIterator::SELF_FIRST);
  $find_variables = iterator_to_array($iterator,true);
  
  foreach($find_variables as $rec){
    if (is_array($rec) && !empty($rec) && $rec['text'] != '') {
      $manjar = json_encode($rec);
      $manj1 = htmlspecialchars($manjar , ENT_QUOTES);
      // 移除onclick属性，把额外数据存在data-manjar里，同时修正混乱的HTML标签结构
      echo '<tr><td><div id="my-div3"><button class="btn btn-danger" type="button" data-id="'.$i.'" data-manjar="'.$manj1.'">Info</button></div></td></tr>';
      $i++;
    }
  }
}

额外说明 #

原PHP代码里的HTML标签有嵌套错误（比如无开头的</a>、混乱的<td>闭合），我在修正时一并调整了，确保HTML结构合法——这也能避免一些潜在的DOM解析问题。

这样修改后，每个按钮的点击事件只会绑定一次，每次点击只会触发一次alert，不会再出现次数递增的问题。

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