Ajax加载的MySQL表格无法被脚本访问，求双击修改记录方案

嘿，这个问题我太熟了！你遇到的是动态DOM元素的事件绑定陷阱：原来的脚本是在页面初始加载时（onload阶段）获取表格行并绑定双击事件，但通过AJAX加载的表格是在页面加载完成后才插入到DOM中的，这时候原来的绑定逻辑早就执行完毕，自然找不到这些新生成的表格行啦。

下面给你两种靠谱的解决方案：

方案1：AJAX回调后重新绑定事件 #

把绑定双击事件的逻辑抽成独立函数，这样不管是页面初始加载还是AJAX加载完成后，都能调用这个函数来绑定事件。

重构后的代码： #

// 抽离绑定逻辑为独立函数
function bindRowDoubleClick() {
  var table = document.getElementById("mytable");
  if (!table) return; // 避免表格不存在时报错
  
  var rows = table.rows;
  for(var i = 0, ceiling = rows.length; i < ceiling; i++) {
    rows[i].ondblclick = function() {
      var myrec = this.cells[0].innerHTML;
      // 修正判断逻辑，原代码的nreg应该是笔误
      if (myrec) {
        window.open('c_modif_reg.php?nreg=' + myrec);
      }
    }
  }
}

// 页面初始加载时绑定
window.onload = function() {
  bindRowDoubleClick();
};

// 修改AJAX请求代码，在回调中重新绑定事件
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 假设你把AJAX返回的表格插入到指定容器
    document.getElementById("table-container").innerHTML = this.responseText;
    // 表格加载完成后，重新绑定双击事件
    bindRowDoubleClick();
  }
};
xhttp.open("GET", "get_table.php?q="+str, true);
xhttp.send();

方案2：使用事件委托（更优雅的方式） #

利用DOM事件冒泡的特性，把双击事件绑定到一个一直存在的父元素（比如表格的容器、<table>本身，甚至document），这样不管表格行是静态还是动态生成的，双击事件都会冒泡到父元素，我们只需要在父元素的事件处理函数里判断点击的目标是不是表格行即可。

示例代码： #

// 绑定事件到document（也可以绑定到表格的父容器，比如#table-container）
document.addEventListener('dblclick', function(e) {
  // 向上查找点击元素的父级，直到找到<tr>标签
  var targetRow = e.target;
  while (targetRow && targetRow.tagName !== 'TR') {
    targetRow = targetRow.parentNode;
  }
  
  // 确认找到的是目标表格的行（可排除表头行，根据需求调整）
  if (targetRow && targetRow.parentNode.id === 'mytable') {
    var myrec = targetRow.cells[0].innerHTML;
    if (myrec) {
      window.open('c_modif_reg.php?nreg=' + myrec);
    }
  }
});

这种方式的好处是：只需要绑定一次事件，不管后续通过AJAX加载多少次表格，都不需要重新绑定，代码更简洁也更高效。

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