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?

I thought I searched thoroughly, but the term 'toggle' must have slipped my mind — Erika
– Erika, Commented Mar 21, 2013 at 9:46

Ravi Y · Accepted Answer · 2013-03-21 09:25:01Z

11

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/

answered Mar 21, 2013 at 9:25

Ravi Y

4,3662 gold badges31 silver badges39 bronze badges

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

Comments

Tim S. · Accepted Answer · 2013-03-21 09:25:20Z

4

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
}

answered Mar 21, 2013 at 9:25

Tim S.

13.9k9 gold badges50 silver badges73 bronze badges

Comments

tomsseisums · Accepted Answer · 2013-03-21 10:49:10Z

2

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/

edited Mar 21, 2013 at 10:49

tomsseisums

13.5k20 gold badges89 silver badges150 bronze badges

answered Mar 21, 2013 at 9:33

Subodh Ghulaxe

18.7k15 gold badges87 silver badges103 bronze badges

Comments

tomsseisums · Accepted Answer · 2013-03-21 09:32:41Z

0

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.

edited Mar 21, 2013 at 9:32

answered Mar 21, 2013 at 9:27

tomsseisums

13.5k20 gold badges89 silver badges150 bronze badges

Collectives™ on Stack Overflow

Change the button's function with jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related