jQuery单击：not（）选定元素仅触发一次

Question

http://jsfiddle.net/qLhp7mns/1/

嗨，您好！ 这个简单的切换操作有点问题-在一个.click事件发生后，我无法将其切换回其原始状态！ 我不知道我在做什么错（或者根本就错）。 浏览器内的Javascript控制台未显示任何错误，因此我更加困惑！

我一直在浏览有相同问题的人的许多问题，但是添加“ on”事件似乎无济于事（除非我也做错了！）。 希望这不仅是更多的相同：c预先感谢！ <3

这是导致问题的JQuery行：

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

Answer 1

试试这个代替（ 小提琴 ）

$(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');
 });

这将为两个div selected的类与类tog切换。 小提琴

正如您提到的那样，您尝试使用on()没有得到想要的结果，或者可能使用了错误的结果，这是一种解释-诸如click()类的事件仅适用于页面加载时实际位于DOM中的元素。 要将事件处理程序应用于后来添加的元素或例如添加类的结果，可以使用事件委托 -静态父元素，例如$(document) -将事件委托给动态添加/调整的元素。

供参考： https : //api.jquery.com/on/#on-events-selector-data-handler的 “直接和委托事件”部分：

“事件处理程序仅绑定到当前选择的元素；在代码调用.on（）时，它们必须存在于页面上。”