javascript - 来自 AJAX 请求时，toggleClass 不起作用

我有一个网页，其中包含用于发出 AJAX 请求的链接。当以下 .js 返回时，toggleClass 函数不起作用。

$(document).ready(function(){
  $("td").click(function(){
    $(this).toggleClass("br");
  });
});

如果我用 addClass("br") 替换 toggleClass("br") ，那么这确实有效。

此外，如果我将 .js 放入 html 页面或者从控制台运行它，toggleClass 工作正常。似乎 toggleClass 和 AJAX 请求一起阻止了这段代码的工作，但我不知道为什么会这样。

更新

我已经找到问题所在了。我不小心包含了 jQuery 两次，因此来自 AJAX 请求的 javascript 运行了两次。因此，为什么只有 toggleClass “不起作用”，而 addClass 和 removeClass 却“不起作用”。

剩下的唯一谜团是为什么只有当 .js 来自 AJAX 请求时才会出现这种情况，而不是在 HTML 本身中时出现这种情况。

最佳答案

假设您希望 click 处理程序位于由 AJAX 查询填充的元素上，则必须稍后将事件绑定(bind)到 AJAX 查询触发之前存在的 DOM 元素。假设您有以下 HTML:

<html>
  <body>
    <table id="populatedByAjax"></table>
  </body>
</html>

...您知道您将通过 AJAX 填充表格。然后我们需要像这样声明我们的 jQuery 选择器:

$("#populatedByAjax").on("click", "td", function(){
  $(this).toggleClass("br");
});

这可确保 click 事件绑定(bind)到选择器中的任何当前或 future td 元素#populatedByAjax

关于javascript - 来自 AJAX 请求时，toggleClass 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43773894/