setInterval刷新内容后SVG图片点击事件失效的解决请求

你每次通过XMLHttpRequest更新#table的innerHTML时，原有的SVG元素会被全新的DOM元素替换掉。之前用$('#svg').click()绑定的事件仅对初始加载时存在的DOM元素生效，新生成的SVG元素不会自动继承该事件绑定，所以点击功能失效。

方案1：使用事件委托（推荐） #

利用事件冒泡机制，将点击事件绑定到不会被替换的父容器（比如#table）上，监听子元素#svg的点击动作。这种方式无需每次刷新都重新绑定事件，性能更优。

修改事件绑定代码为：

// 绑定到静态父容器#table，监听子元素#svg的点击
$('#table').on('click', '#svg', function() {
  var text = '<?php echo $text; ?>';
  $.post("https://example.com/def.php", { 'get-php': true, text: text }, function(data) {
    alert(data);
  });
});

说明：#table是始终存在的静态容器，它能捕捉到内部动态生成的#svg元素的点击事件，无论#table内容被刷新多少次，点击功能都能正常生效。

方案2：每次刷新后重新绑定事件 #

在AJAX请求完成、更新页面内容之后，重新给新的SVG元素绑定点击事件。需要注意移除原有的重复绑定，避免多次点击触发多次请求。

修改定时刷新脚本：

const intervalId = setInterval(function() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function(){
    const table = document.getElementById("table");
    table.innerHTML = this.responseText;
    
    // 先移除可能存在的旧绑定，再重新绑定点击事件
    $('#svg').off('click').click(function() {
      var text = '<?php echo $text; ?>';
      $.post("https://example.com/def.php", { 'get-php': true, text: text }, function(data) {
        alert(data);
      });
    });
  }
  xhttp.open("GET", "https://example.com/abc.php");
  xhttp.send();
}, 6000);

注意：这种方案需要删除abc.php中原有的点击事件绑定代码，避免重复绑定导致逻辑混乱。

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