Question

1 - 我有这个简单的html按钮：

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

2 - 和一些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 - 多次点击testBtn后，firefox会显示以下消息：

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

点击后继续，firefox再次显示上述消息。

4 - 我使用了以下解决方案，并且能够解决无响应的对话框：

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 - 以上解决方案效果很好，但为什么第一个解决方案会杀死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

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

为什么浏览器在使用jQuery的多个事件后无响应？

4 个答案: