无法在javascript jQuery中获取click事件

Question

你好，所以我有一个默认类为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（。锁定）。

Answer 1

尝试

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

    $('#LockLeftMenu').click(function(){
        var $this = $(this).toggleClass('Unlocked locked');

        if($this.hasClass('Unlocked')){
            $("#LeftMenu").css('margin-left', '0');
            $("#lbl_lock").text("UnLock");
        } else {
            $("#lbl_lock").text("Lock");
            $("#LeftMenu").css('margin-left', '-260px');
        }
    });

});

Answer 2

这是因为匿名函数已在文档就绪时绑定到元素。 删除或向元素添加类不会更改该元素上的“单击”事件。

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

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

Answer 3

你可以使用下面的代码：

$('#LockLeftMenu').live('click',function(){
    var $this = $(this).toggleClass('Unlocked locked');

    if($this.hasClass('Unlocked')){
        $("#LeftMenu").css('margin-left', '0');
        $("#lbl_lock").text("UnLock");
    } else {
        $("#lbl_lock").text("Lock");
        $("#LeftMenu").css('margin-left', '-260px');
    }
});

那就是希望这会对你有所帮助。

Answer 4

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

        $(".Unlocked").click(function(){
            if($('#LockLeftMenu').attr('class') === '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");

             }

        });

Answer 5

此代码在页面加载时运行。 这意味着在页面加载时， Unlocked处理程序将添加到具有Unlocked类的所有元素，并且Locked处理程序将添加到在页面加载时具有Locked类的元素。 但是在页面加载时，没有类Locked ，因此您的处理程序不会添加到任何元素。

您可以通过使用单个处理程序（如其他响应中所述）或使用jQuery .delegate（）方法来解决此问题：

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

    $(document).delegate(".Unlocked", "click", function(){
        // Unlocked stuff there
    });

    $(document).delegate(".locked", "click", function (event) {
        // Locked stuff there
    });
});

Answer 6

使用jQuery的delegate函数来完成这项工作：

$(document).delegate('.Unlocked', 'click', function () { ... });
$(document).delegate('.locked', 'click', function () { ... });

这是一个小提琴 。

顺便说一句，如果你想知道 - 你的标签消失了，因为你分配给它的负左边距。