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

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