Question

1 – I have this simple html button :

<input type="button" id="testBtn" value="1" />

2 – and some jquery :

function one()
{
    $("#testBtn").val("1")
    .click(function(){
        zero();
    });         
}

function zero()
{
    $("#testBtn").val("0")
    .click(function(){
        one();
    });
}
$(document).ready(function(){
    $("#testBtn").click(function(){
        zero();
    });
});

3 – after multiple click on the testBtn firefox shows this message :

A script on this page may be busy, or it may have stopped responding. You can stop script now, or you can continue to see if the script will complete. Script: http://localhost/js/jquery-1.7.2.min.js:2

after click continue firefox shows above message again.

4 – I used the following solution instead and was able to resolve the unresponsive dialog:

var state=1;

function onezero()
{
    if (state == 1)
    {
        $("#testBtn").val("0")
        .click(function(){
            one();
        });
    }
    else
    {
        $("#testBtn").val("0")
        .click(function(){
            one();
        });     
    }
}

$(document).ready(function(){
    $("#testBtn").click(function(){
        onezero();
    });
});

5 – and above solution works well, but why first solution kills jquery?

Answer 1

Because you keep adding a click event every time. click() does not override the previous event.

    $("#testBtn").val("0")
    .off("click").on("click", function(){
        one();
    }); 

The bad thing with off is it will wipe out any other click event that may be attached to that element. That is bad. The better approach is to add one click handler and build the logic into that to what to do.

    $("#testBtn").data("state",false).val("0")
    .on("click", function(){
        var elem = $(this);
        var state = elem.data("state");
        if(state) {
            one();
        } else {
            two();
        }
        elem.data("state", !state);
    });