Toggling Click Handlers In Javascript

I have an HTML button to which I attach an event, using jQuery's bind(), like so: $('#mybutton').bind('click', myFirstHandlerFunction); In myFirstHandlerFunction, I'd like this ha

Solution 1:

Update: Since this form of toggle() was removed in jQuery 1.9, the solution below does not work anymore. See this question for alternatives.

It looks like toggle() would solve your problem:

$("#mybutton").toggle(myFirstHandlerFunction, mySecondHandlerFunction);

The code above will register myFirstHandlerFunction and mySecondHandlerFunction to be called on alternate clicks.

Solution 2:

Just use a boolean to toggle the functionality of the handler, there's no need to juggle which handler is listening:

$('#mybutton').bind('click', myHandlerFunction);
var first = true;

functionmyHandlerFunction(e) {
    if(first){
        // Code from the first handler here;
    }else{
        // Code from the second handler here;
    }
    first = !first; // Invert `first`
}

Solution 3:

This solution is a hack, but it is short and sweet for your rough work:

$('#myButton').click(function() {
  (this.firstClk = !this.firstClk) ? firstHandler(): secondHandler();
});

It's a hack because it's putting a new property directly onto this which is the click-target HTML DOM element, and that's maybe not best practice. However, it thus avoids creates any new globals, and it can be used unchanged on different buttons simultaneously.

Note that the first part of the ternary operation uses = and not == or ===, i.e. it's an assignment, not a comparison. Note also that the first time the button is clicked, this.firstClk is undefined but is immediately negated, making the first part of the ternary operation evaluate to true the first time.

Here's a working version:

$('#a > button').click(function() {(this.firstClk = !this.firstClk) ? a1(): a2();});
$('#b > button').click(function() {(this.firstClk = !this.firstClk) ? b1(): b2();});

functiona1() {$('#a > p').text('one');}
functiona2() {$('#a > p').text('two');}

functionb1() {$('#b > p').text('ONE');}
functionb2() {$('#b > p').text('TWO');}

div {display: inline-block;width: 10em;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="a"><p>not yet clicked</p><button>click</button></div><divid="b"><p>NOT YET CLICKED</p><button>CLICK</button></div>

Solution 4:

I was looking at this today, and realized there was still not a way to do this without a global variable listed. I came up with the following to add locations to an ESRI basemap, but it would work generally too:

functionaddLocationClickHandler() {
    var addLocationClick = overviewMap.on('click', function (event) {
        addLocationClick.remove();
    })
    $('#locationAddButton').one('click', function (cancelEvent) {
        addLocationClick.remove();
        $('#locationAddButton').on('click', addLocationClickHandler)
    });
}

$('#locationAddButton').on('click', addLocationClickHandler)

This should allow you to put something else in the section where you overwrite the click handler and not necessitate a global variable.

Solution 5:

This would help add data-click-state attribute on your button

$(document).ready(function() {
    $('#mybutton').on('click', function() {
        if ($(this).attr('data-click-state') == 1) {
            $(this).attr('data-click-state', 0)
            myFirstHandlerFunction();
        } else {
            $(this).attr('data-click-state', 1)
            mySecondHandlerFunction();
        }
    });
});