Ajax调用仅首次生效求助：动态切换链接点击失效问题

嘿，这个问题我太熟悉了！之前帮好几个开发者排查过类似的问题，咱们来一步步搞清楚根源和解决办法：

你在$(document).ready()里用$("a[href*='close']").click(...)绑定事件时，是把点击事件直接绑定到了页面初始化时存在的、符合选择器的a元素本身上。这种绑定是一次性的，只和DOM元素挂钩，和它的属性（比如href）没有关联。

当你第一次点击后，虽然修改了该a标签的href为包含"open"的值，但元素上已经绑定的旧click事件并没有被移除——浏览器只会管这个元素有没有绑定过事件，不会去检查它的属性有没有变化。所以第二次点击时，依然会触发原来的close逻辑函数，导致不符合预期的行为。

事件委托是解决动态元素事件绑定问题的标准方案，它利用DOM的事件冒泡机制，把事件绑定到一个稳定的父元素上（比如表格的tbody、整个表格，甚至document），每次触发事件时再判断目标元素是否符合条件。这样不管元素的属性怎么动态变化，都能正确触发对应的逻辑。

举个具体的实现示例（假设你的a标签嵌套在class为target-table的表格中）：

$(document).ready(function() {
  // 绑定close逻辑的事件委托
  $(".target-table").on("click", "a[href*='close']", function(event) {
    event.preventDefault();
    // 这里写你的close逻辑：修改单元格内容等操作
    // 比如：$(this).closest("tr").find(".target-cell").text("Closed");
    
    // 修改href和文本，切换为open状态
    $(this).attr("href", $(this).attr("href").replace("close", "open"));
    $(this).text("Open");
  });

  // 绑定open逻辑的事件委托
  $(".target-table").on("click", "a[href*='open']", function(event) {
    event.preventDefault();
    // 这里写你的open逻辑：恢复单元格内容等操作
    // 比如：$(this).closest("tr").find(".target-cell").text("Open");
    
    // 修改href和文本，切换回close状态
    $(this).attr("href", $(this).attr("href").replace("open", "close"));
    $(this).text("Close");
  });
});

为什么事件委托能解决问题？ #

• 事件绑定在不会被动态修改的父元素上，避免了动态元素绑定失效的问题；
• 每次点击时，父元素会检查触发事件的目标元素是否匹配当前的选择器（a[href*='close']或a[href*='open']），实时判断执行对应的逻辑，完全不受元素属性变化的影响。

替代方案（不推荐） #

如果你暂时不想用事件委托，也可以在每次修改元素属性后，手动解绑旧事件再重新绑定，但这种方式繁琐且容易遗漏，比如：

// 封装close逻辑函数
function handleClose(event) {
  event.preventDefault();
  // close逻辑...
  $(this).off("click", handleClose); // 解绑旧事件
  $(this).attr("href", $(this).attr("href").replace("close", "open"));
  $(this).on("click", handleOpen); // 绑定新的open逻辑
  $(this).text("Open");
}

// 封装open逻辑函数
function handleOpen(event) {
  event.preventDefault();
  // open逻辑...
  $(this).off("click", handleOpen); // 解绑旧事件
  $(this).attr("href", $(this).attr("href").replace("open", "close"));
  $(this).on("click", handleClose); // 绑定新的close逻辑
  $(this).text("Close");
}

// 初始化绑定
$(document).ready(function() {
  $("a[href*='close']").on("click", handleClose);
});

这种方式需要手动管理事件的绑定和解绑，代码冗余且容易出错，所以更推荐使用事件委托的方案。

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