jquery - Why does the browser become unresponsive after multiple events using jQuery?

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

第一个解决方案每次单击按钮时都会附加一个新的事件处理程序。你实际上会更好：

document.getElementById('testBtn').onclick = function() {
    this.value = this.value == 1 ? 0 : 1;
};

Answer 2

http://jsfiddle.net/YFUuR/

打开您的控制台并查看一下，当您不断单击按钮时，它会不断将越来越多的事件处理程序附加到它上面。最终这一切都结束了。

Answer 3

因为您每次都不断添加点击事件。click()不会覆盖前一个事件。

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

不好的off是它会清除可能附加到该元素的任何其他点击事件。那很不好。更好的方法是添加一键式处理程序并将逻辑构建到该处理程序中。

    $("#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);
    }); 

Answer 4

由于您的引用，您通过添加不必要的事件处理程序来重载元素。