javascript - 为什么通话每次都翻一番？

此处显示：JS Fiddle

这是我们关注的代码：

    doit1();

    function doit2(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").addClass("highlighted");
            $("#evtTarget").on("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You Turned on the hover effect!</p>");
            doit1();
        });}

    function doit1(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").off("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You shut off the hover effect!</p>");
            $("#evtTarget").removeClass("highlighted");
            console.log("check");
            doit2();
        });}

我无法弄清楚关于此代码的某些事情，它来回调用并且每次都将调用加倍。这最终会破坏页面。为什么会这样，我该如何做得更好？

最佳答案

在两个功能上，将$("#evtTarget").on("click", function(evt) {更改为$("#evtTarget").off( "click" ).on("click", function(evt) {