Question

你好！这个简单的切换我有点问题 - 在一次.click事件后我无法将其切换回原来的状态！我不知道我做错了什么（或者根本就没问题）。浏览器中的Javascript控制台没有显示任何错误，所以我更加困惑！

我一直在浏览那些有相同问题的人提出的问题，但添加“on”事件似乎什么也没做（除非我做错了！）。希望这不仅仅是相同的：c提前谢谢！＆LT; 3

这是引起麻烦的JQuery系列：

$('.tog:not(.selected)').click(function(){
$('.tog.selected').removeClass('selected');$(this).addClass('selected');
});

Answer 1

请改为尝试（fiddle）

$(document).on('click', '.tog:not(.selected)', function() {
   $('.tog.selected').toggleClass('selected');
   $(this).toggleClass('selected');
});

Answer 2

使用toggleClass()时，可以将其简化为

 $(document).on('click', '.tog:not(.selected)', function () {
    $('.tog').toggleClass('selected');
 });

使用类selected切换两个div的类tog。 Fiddle

正如您所提到的那样，您尝试使用on()而未获得所需结果并且可能使用了错误的解释 - 像click()这样的事件只能应用于页面中实际存在于DOM中的元素已加载。将事件处理程序应用于稍后添加的元素或者例如可以使用添加类的结果，事件委托 - 静态父元素，例如， $(document) - 将事件委托给动态添加/调整的元素。

供参考：https://api.jquery.com/on/#on-events-selector-data-handler，部分＆＃34;直接和委派活动＆＃34;：

＆＃34;事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。＆＃34;

JQuery点击：not（）仅选择元素一次点火

2 个答案: