本文解决 php 动态生成表格中嵌入的 ajax 按钮需双击才能生效的问题，核心在于避免内联脚本重复绑定、使用事件委托替代循环绑定，并分离 dom 加载逻辑与事件监听逻辑。
本文解决 php 动态生成表格中嵌入的 ajax 按钮需双击才能生效的问题，核心在于避免内联脚本重复绑定、使用事件委托替代循环绑定，并分离 dom 加载逻辑与事件监听逻辑。
在基于 PHP 生成 HTML 表格并配合 AJAX 实时刷新（如每 3 秒轮询）的场景中，一个常见痛点是：表格内按钮点击需两次点击才触发预期的 POST 请求。根本原因在于你当前代码中存在多个关键设计缺陷：
? 问题根源分析
-
重复脚本注入：
<?php foreach($row as $row): ?>循环内嵌入了多段<script></script>，导致$(document).on('click', ...)被反复绑定数十次，首次点击可能被未就绪的监听器“吞掉”，第二次才命中； -
事件委托缺失：动态插入的 DOM 元素（如
#table3内容由XMLHttpRequest更新后重绘）无法被早期$(document).ready()中的静态选择器捕获； -
混用原生与 jQuery 事件流：
event.preventDefault()在错误层级调用，且onclick属性与 jQuery.on()并存，引发执行顺序混乱； -
SQL 注入高危：
$Host_ID直接拼入 SQL 查询，无任何参数化防护。
✅ 正确实践：事件委托 + 一次绑定 + 安全查询
将所有 JavaScript 逻辑统一移至页面底部（
