I'm trying to attach events using on() based on changing selectors

Question

I have a button that can be in 2 different states (lets say Lock and Unlock). When I click on the button, I update the class on the button to reflect the binary opposite state. Each class has a different event attachment function using on(string, callback). For some reason the event being triggered remains the first callback assigned based on the original class.

HTML:

<button class="lock">Lock</button>
<button class="unlock">Unlock</button>

JavaScript:

$(document).ready(function() {
    $('.lock').on('click', function() {

        // Perform some magic here
        console.log('Lock!');

        $(this).removeClass('lock')
               .addClass('unlock')
               .html('Unlock');
    });

    $('.unlock').on('click', function() {

        // Perform some magic here
        console.log('Unlock!');

        $(this).removeClass('unlock')
               .addClass('lock')
               .html('Lock');
    });
});

https://jsfiddle.net/c283uaog/ for testing.

Expected console output when clicking on the same button repeatedly:

Lock!
Unlock!
Lock!

Actual console output:

Lock!
Lock!
Lock!

Any assistance would be greatly desired

Balachandran · Accepted Answer · 2015-06-10T11:56:50.047

2

use event Delegation

$(document).on('click','.lock', function() {


 $(document).on('click','.unlock', function() {

updated Demo

Or use in single function with toggleClass

$(document).on('click', '.lock,.unlock', function () {
     $('#output').html($(this).attr('class'));
    $(this).toggleClass('lock unlock').text($(this).attr('class'));

});

ToggleClass demo

edited Jun 10 '15 at 11:56

answered Jun 10 '15 at 11:49

Balachandran

9,567
1
16
26

score 1 · Answer 2 · answered Jun 10 '15 at 11:51

I'd do it this way, attaching only one event: http://jsfiddle.net/jozu47tv/

$(".lock").on('click', function(e) {
    e.preventDefault();
    if($(this).hasClass("lock")) {
        $(this).removeClass("lock").addClass("unlock");
        console.log("lock ->  unlock");
    } else {
        $(this).removeClass("unlock").addClass("lock");    
        console.log("unlock -> lock");
    }
})

score 1 · Answer 3 · answered Jun 10 '15 at 11:55

Use Event Delegation method, Try this updated fiddle,

$(document).ready(function() {
    $(document).on('click', '.lock', function() {
        $('#output').html('Lock!');
        $(this).removeClass('lock')
               .addClass('unlock')
               .html('Unlock');
    });

    $(document).on('click', '.unlock', function() {
        $('#output').html('Unlock!');
        $(this).removeClass('unlock')
               .addClass('lock')
               .html('Lock');
    });
});

score 1 · Answer 4 · edited May 23 '17 at 12:21

1

Probably, this question could answer you in a better way: jQuery .on function for future elements, as .live is deprecated
$(document).on(event, selector, handler)

edited May 23 '17 at 12:21

Community

1
1

answered Jun 10 '15 at 11:56

Navaneeth

2,555
1
18
38

score 0 · Answer 5 · answered Jun 10 '15 at 11:57

Change your html to this:

<button class="locker lock" >Lock</button>
<button class="locker unlock"">Unlock</button>

<div id="output">Output</div>

and your Js to this:

$(document).ready(function() {
    $('.locker').on('click', function() {
        if($(this).hasClass("lock")){
           $(this).removeClass("lock");
           $(this).addClass("unlock");
           $(this).html("unlock");
         }
          else if($(this).hasClass("unlock")){
           $(this).removeClass("unlock");
           $(this).addClass("lock");
           $(this).html("lock");
         }
    });
});

I'm trying to attach events using on() based on changing selectors

5 Answers5