javascript - 无法在JavaScript jQuery中获得点击事件

您好，所以我有一个默认类为Unlocked的div。单击它时，删除类Unlocked并将其更改为locked类，再次单击时，转到旧的Unlocked。

这是我的js

 $(document).ready(function() {
        console.log("Test");

        $(".Unlocked").click(function(){
            console.log("HI2");
            $("#LeftMenu").css('margin-left', '0');
             $("#LockLeftMenu").removeClass("Unlocked");
            $("#LockLeftMenu").addClass("locked");
             $("#lbl_lock").text("UnLock");


        });

  $(".locked").on("click", function (event) {
            console.log("HI");
            $("#lbl_lock").text("Lock");

            $("#LeftMenu").css('margin-left', '-260px');
            $("#LockLeftMenu").removeClass("locked");
            $("#LockLeftMenu").addClass("Unlocked");


        });

    });

这是我在点击之前需要的HTML，

<div id="LeftMenu">
<div id="LockLeftMenu" class="Unlocked">
<label id="lbl_lock">Lock</label>
</div>

点击后

<div id="LeftMenu" style="margin-left: 0px;">
<div id="LockLeftMenu" class="locked">
<label id="lbl_lock">UnLock</label>
</div>

但是单击旧的$(。Unlocked)元素后，在console.log中看到的只是HI2.HI2.HI2 ...我无法进入HI $(。locked)。

最佳答案

这是因为匿名功能已在文档就绪时绑定(bind)到该元素。删除类或向其添加类将不会更改该元素上的“click”事件。

我认为最好像这样创建一个类:

<div id="LockLeftMenu" class="Clickable Unlocked">

然后在javascript中:

$(".Clickable").click(function(){
    if($(this).hasClass('Unlocked'))
    {
        console.log("HI2");
        $("#LeftMenu").css('margin-left', '0');
        $("#LockLeftMenu").removeClass("Unlocked");
        $("#LockLeftMenu").addClass("locked");
        $("#lbl_lock").text("UnLock");
    }
    else
    {
        console.log("HI");
        $("#lbl_lock").text("Lock");

        $("#LeftMenu").css('margin-left', '-260px');
        $("#LockLeftMenu").removeClass("locked");
        $("#LockLeftMenu").addClass("Unlocked");
    }
});