How to deactivate a nested anonymous function in Jquery

Question

I have the following code:

$('#button-a').click(function(){   
    $('#button-b').click(function(){
        alert('something');
    });
});
$('#button-b').click(function(){   
    // do something
});

How can I deactivate the nested #button-b function after I have clicked #button-a, so only the last #button-b function (not nested) activates when i click #button-b and not them both?

do you mean remove the event? If so you can do $('#button_b').unbind('click') — lomas09, Jul 31 '13 at 16:28
However, for this you have to first attach the event like so: $('#button_b').bind('click',function(){}); — lomas09, Jul 31 '13 at 16:29
You can't specify which function unbind, if it's anonymous. @ http://stackoverflow.com/a/5136424/2180189 — MightyPork, Jul 31 '13 at 16:31
@MightyPork you can do `$(el).off('click')` and then bind the new event, it is situationnal. — Karl-André Gagnon, Jul 31 '13 at 16:32
Yes, but not if you want to keep the (possible) other handlers on... — MightyPork, Jul 31 '13 at 16:33

score 1 · Accepted Answer · answered Jul 31 '13 at 16:31

Try this using .on() and .off() event handlers.

$('#button-a').click(function(){   
    $('#button-b').off('click');   //unbind the click event of the #button-b
    $('#button-b').click(function(){
        alert('something');
    });
});
$('#button-b').on('click',function(){   
    // do something
});

score 0 · Answer 2 · answered Jul 31 '13 at 16:30

In order to accomplish this, your function cannot be anonymous. You need to use the form of off which specifies the handler to remove. Rewriting your code a bit, it'd look something like this:

function myFunc() {
    alert('something');
}

$("#button-a").click(function() {
    $("#button-b").click(myFunc);
});

$("#button-b").click(function() {
    // do something
});

To remove the handler, you'd use:

$("#button-b").off('click', myFunc);

I'm not quite sure where you want this to occur, but the above line of code will work anywhere that the DOM has been loaded and myFunc is in scope.

score 0 · Answer 3 · answered Jul 31 '13 at 16:40

If you feel you definitely need an anonymous handler here, you can use event namespace for your task - http://api.jquery.com/on/

    $('#button-b').on('click.nestedClick', function(){
        alert('something');
    });
    // and unbind it at some point:
    $('#button-b').off('click.nestedClick');

score 0 · Answer 4 · answered Jul 31 '13 at 16:43

0

$('#button-a').click(function(){   
    $('#button-b').trigger('click');
});
$('#button-b').click(function(){   
    // do something
});

Change your code like this so it call your last function for button-b when you click on button-a

answered Jul 31 '13 at 16:43

GeniusJRS

119
2
6

Your wrong, he want to prevent the click event of `#button-b`. But your code trigger the click. right? – Praveen Jul 31 '13 at 16:53
he just want to call last click of the button and prevent that click so i think this is right – GeniusJRS Jul 31 '13 at 17:12

How to deactivate a nested anonymous function in Jquery

4 Answers4