javascript - 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。