jquery - 单击元素时如何交替调用两个函数？

HTML：

<ul>
   <li class='selectable'>Data</li>
   <li class='deselectable'>Data</li>
</ul>

Java脚本

$(".selectable").click(function()
{
    alert("select "+$(this).prop("class"));
    //data
    $(this).removeClass('selectable').addClass('deSelectable');
});

$(".deselectable").click(function()
{
    alert("deselect "+$(this).prop("class"));
    //data
    $(this).removeClass('deSelectable').addClass('selectable');
});

第一次单击li元素时，此代码工作正常。当我第一次单击“ .selectable”时，我得到“ select selectable”，第二次我得到“ select deselectable”而不是“ deselect deselectable”。

单击相同的“ li”元素时，如何在两种方法之间切换？

最佳答案

click仅在绑定时绑定到与选择器匹配的元素。您要对委托事件使用on：

$(document).on('click', '.selectable', function() { ... });
$(document).on('click', '.deselectable', function() { ... });

请注意，css类区分大小写。 deSelectable不是deselectable。

如果有一个容器将包含所有可选择的和不可选择的，不会被破坏并且比document更近的容器，请改用该容器。