JQuery单击功能不适用于特定项目

Question

请参阅jsfiddle链接http://jsfiddle.net/Bjf7c/1/并解释为什么在我们选择其他项目并返回到第一个选定项目后，点击功能不起作用。它看起来很奇怪，因为所有相似的项目都会激活点击功能，但不会激活默认的选定项目。

在示例中，首先单击F，然后单击E.您会发现除E外，所有其他项目都是可点击的。

$(".items.cursor:not('.selected')").on('click',function(){   
    $('.items.selected').removeClass('selected');
    $(this).addClass('selected');
});

Answer 1

写作时

$(".items.cursor:not('.selected')").on('click',function(){

将事件处理程序绑定到绑定时未选择的所有项目，而不是点击时。所以你不要绑定到最初选择的元素。

您可以使用on和委派来保留您的选择器并每次都进行测试，但这是一个更好的解决方案：

$(".items.cursor").on('click',function(){
  if ($(this).hasClass('selected')) return;
  $('.items.selected').removeClass('selected');
  $(this).addClass('selected');
});

（在这个具体的例子中，测试并不是很有用，但如果你添加更多的代码并且如果用户点击已经选择的元素则不希望它被执行）

Answer 2

您将click事件上的函数仅绑定到非选定元素。 页面加载时选择E并绑定此功能。