Javascript 来自AJAX请求时toggleClass不工作_Javascript_Jquery_Ajax

Javascript 来自AJAX请求时toggleClass不工作

javascript jquery ajax

Javascript 来自AJAX请求时toggleClass不工作,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个网页，上面有一个链接，可以发出AJAX请求。当下面的.js返回时，toggleClass函数不起作用 $(document).ready(function(){ $("td").click(function(){ $(this).toggleClass("br"); }); }); 如果我用类似于addClass（“br”）的东西替换toggleClass（“br”），那么这就行了此外，如果我将.js放入html页面或从控制台运行它，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查询填充的元素上，则必须将事件延迟绑定到AJAX查询触发之前存在的DOM元素。假设您有以下HTML：

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

这确保了

单击事件绑定到选择器#populatedbayajax
中的任何当前或未来td
元素，假设您希望单击
处理程序位于由AJAX查询填充的元素上，您必须将事件延迟绑定到AJAX查询触发之前存在的DOM元素。假设您有以下HTML：
<html>
  <body>
    <table id="populatedByAjax"></table>
  </body>
</html>

这确保了点击事件绑定到选择器#populated by ajax
中任何当前或未来的td
元素，并使用委派事件将点击事件绑定到动态创建的元素，同时避免频繁附加和删除事件处理程序
$(document).on('click', '#td', function() {
  $(this).toggleClass("br");
});

使用委派事件将单击事件绑定到动态创建的元素，并避免频繁附加和删除事件处理程序
$(document).on('click', '#td', function() {
  $(this).toggleClass("br");
});

td是动态元素？您在成功函数中绑定了它吗？不，整个表元素直接来自服务器。您是否检查了开发人员控制台以查看是否有任何Javascript执行失败，从而没有命中此Javascript？我有，是的。没有出现错误。正如OP中提到的，如果我在控制台中输入javascript，它就可以正常工作。此外，如果放置类似于console.log（“x”）右下方$（此）.toggleClass（“br”）然后“x”将输出到控制台。事实上，我想我有线索了！当我执行上面提到的操作时，我注意到每次点击都会返回2“x”——这意味着浏览器不知何故会接收到两次点击——然后再切换开关。这看起来很奇怪，因为当我通过其他方式（在html中或通过控制台）将.js传递给浏览器时，这种双击不会发生？您在成功函数中绑定了它吗？不，整个表元素直接来自服务器。您是否检查了开发人员控制台以查看是否有任何Javascript执行失败，从而没有命中此Javascript？我有，是的。没有出现错误。正如OP中提到的，如果我在控制台中输入javascript，它就可以正常工作。此外，如果放置类似于console.log（“x”）右下方$（此）.toggleClass（“br”）然后“x”将输出到控制台。事实上，我想我有线索了！当我执行上面提到的操作时，我注意到每次点击都会返回2“x”——这意味着浏览器不知何故会接收到两次点击——然后再切换开关。这看起来很奇怪，因为当我通过其他方式（在html中或通过控制台）将.js传递给浏览器时，这种双击不会发生。不，AJAX请求完全由我在OP中发布的代码组成。表从一开始就在那里。此外，我尝试了Mayank Pandeyz的建议（与您的建议非常相似），但它仍然无法与toggleClass
一起使用。我不认为这是选择器的问题，因为其他函数，如addClass
和removeClass
工作正常。不，AJAX请求完全由我在OP中发布的代码组成。表从一开始就在那里。此外，我尝试了Mayank Pandeyz的建议（与您的建议非常相似），但它仍然无法与toggleClass
一起使用。我认为这不是选择器的问题，因为其他函数，如addClass
和removeClass
工作正常。