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

Question

HTML:

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

Javascript

$(".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”时，我得到“选择可选择”，第二次我得到“选择可取消选择”而不是“取消选择可取消选择”。

当我点击同一个“li”元素时，如何在两种方法之间切换？

Answer 1

click 仅绑定(bind)到绑定(bind)时与选择器匹配的元素。您想要将 on 与委托(delegate)事件一起使用:

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

请注意，CSS 类区分大小写。 deSelectable 不是可取消选择。

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