Hello, so I have a div with default class Unlocked. When I click on it, I remove the class Unlocked and change it to locked class, and when I click again, go to the old Unlocked.

This my 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");


        });

    });

This my html i need before click,

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

after click,

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

but after click on the old $(.Unlocked) elements, what I see in console.log is only HI2.HI2.HI2... I can't get to HI the $(.locked).

Hello, so I have a div with default class Unlocked. When I click on it, I remove the class Unlocked and change it to locked class, and when I click again, go to the old Unlocked.

This my 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");


        });

    });

This my html i need before click,

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

after click,

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

but after click on the old $(.Unlocked) elements, what I see in console.log is only HI2.HI2.HI2... I can't get to HI the $(.locked).

• javascript
• jquery

• can you please add a fiddle. This code doesn't seem wrong to me. – Optimus Prime Commented Aug 12, 2013 at 5:36

6 Answers 6

It's because the anonymous function has been bound to the element at document ready. Removing or adding class to an element will not change "click" event on that element.

I think better create one class like this :

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

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

Try

$(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');
        }
    });

});

you can do it using below code:

$('#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');
    }
});

That's All hope this will help you.

$(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");

             }

        });

Use jQuery's delegate function for this job:

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

Here's a Fiddle.

By the way, -in case you're wondering- your label dissapears because of the negative left margin you're assigning to it.

This code is run on page load. This means on page load, the Unlocked handler is added to all elements that have class Unlocked and the Locked handler is added to the elements that have class Locked on page load. However on page load, there is no element with class Locked, so your handler is not added to any element.

You can fix the issue by either using a single handler, like said in other responses, or using jQuery .delegate() method:

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

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

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