Can't get click event in javascript jQuery

Question

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).

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

dann · Accepted Answer · 2013-08-12 05:44:03Z

2

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

answered Aug 12, 2013 at 5:44

dann

8535 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-08-12 05:39:02Z

2

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

});

answered Aug 12, 2013 at 5:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Ram Singh · Accepted Answer · 2013-08-12 05:47:31Z

1

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.

answered Aug 12, 2013 at 5:47

Ram Singh

6,97235 gold badges107 silver badges172 bronze badges

Comments

schnill · Accepted Answer · 2013-08-12 05:47:58Z

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

             }

        });

federicot · Accepted Answer · 2013-08-12 05:56:16Z

1

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.

answered Aug 12, 2013 at 5:56

federicot

12.3k19 gold badges71 silver badges111 bronze badges

1 Comment

federicot Over a year ago

@MauricePerry That's true. Use delegate if you want backwards compatibility (for jQuery < 1.7).

Thierry J · Accepted Answer · 2013-08-12 05:57:10Z

1

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

edited Aug 12, 2013 at 5:57

answered Aug 12, 2013 at 5:49

Thierry J

2,19717 silver badges27 bronze badges

Collectives™ on Stack Overflow

Can't get click event in javascript jQuery

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related