Change the button's function with jQuery?

Question

This might be a silly question but I just can't get it right. I can change the button's function with ordinary JavaScript but not with jQuery. I'm aiming for a very simple text-resize button. This button needs two different functions; one that makes the text bigger and changes the click function to the other function, and this other function makes the text smaller and changes the click function to the first function again. Since the same button will be used for both enlarging and reducing the text sixe, I need this to work. I'm working on a school project right now and we have to use only jQuery/jQuery UI for this assignment.

With ordinary JavaScript, it would be something like this:

var button = document.getElementById('click-button');
button.onclick = firstClick;

function firstClick (){ 
    button.onclick=secondClick;
}

function secondClick(){ 
    button.onclick=firstClick;
}

How do I achieve the same thing with jQuery?

Answer 1

Something like the below code would work.

$("#click-button").on('click', firstClick)

function firstClick() {
    alert("First Clicked");
    $("#click-button").off('click').on('click', secondClick)
}

function secondClick() {
    alert("Second Clicked");
    $("#click-button").off('click').on('click', firstClick)
}

Working example here: http://jsfiddle.net/K3Xk4/

Answer 2

You don't need to change the handler every time. You can use a function and a variable to check if you already clicked the button (or not).

var even = false;

$('#click-button').click(function() {
    if(even) {
        doEven();
    } else {
        doOdd();
    }

    even = !even;
});

function doOdd() {
    // first click, third click, fifth click, etc
}

function doEven() {
    // second click, fourth click, sixth click, etc
}

Answer 3

You can simply do like this

<button id="click-button">test</button>

    var flag = 1;
    $("#click-button").click(function(){
        if(flag == 2){
            secondClick(); flag = 1;
        }else{
            firstClick(); flag = 2;
        }
    });

    function firstClick(){
        alert("First Click.");
    }

    function secondClick(){
        alert("Second Click.")
    }

check here http://jsfiddle.net/K3Xk4/5/

Answer 4

I'd go with custom events and data handling:

$('#click-button').on({
    firstClick : function()
    {
        // do something
        alert(111);

        // switch back
        $(this).data('nextClick', 'secondClick');
    },

    secondClick : function()
    {
        // do something
        alert(222);

        // switch back
        $(this).data('nextClick', 'firstClick');
    },

    click : function()
    {
        var nextClick = $(this).data('nextClick') || 'firstClick';
        $(this).trigger( nextClick );
    }
});

Example here: http://jsfiddle.net/psycketom/nbSMg/

You keep all the time with the same elements scope, no need to define variables outside the functions.

Might be a little overkill, but is the easiest to maintain.