javascript - 功能变得不稳定 | 功能变得不稳定

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
    <script>
        function fire1(){
            $("#btn").click(function(){
                unbind();
                window.alert("First Fire...");
            });
        }

        function fire2(){
            $("#btn").click(function(){
                unbind();
                window.alert("Second Fire...");
            });
        }

        function fire3(){
            $("#btn").click(function(){
                unbind();
                window.alert("Third Fire...");
            });
        }

        function unbind(){
            $("#btn").unbind("click");
        }
    </script>
    <button id="btn">
        <h1>Select a button below to fire an action</h1>
    </button>
    <br>
    <br>
    <button onclick="fire1()">
        1st Fire
    </button>
    &nbsp;&nbsp;
    <button onclick="fire2()">
        2nd Fire
    </button>
    &nbsp;&nbsp;
    <button onclick="fire3()">
        3rd Fire
    </button>
    &nbsp;&nbsp;
</body>
<style>
</style>
</html>

上面的代码将通过单击下面的3个按钮来动态更改$("#btn")的click方法。它仅适用于首次点击。当您第二次单击它时，没有任何反应。似乎单击方法中的功能变得不稳定。有人可以向我解释原因吗？

最佳答案

发生这种情况是因为您取消了对点击的绑定...

function fire1(){
    unbind();
    $("#btn").click(function(){
        window.alert("First Fire...");
    });
}

放置取消绑定之前将删除单击操作，然后设置新的单击事件。您正在执行的操作是删除按钮单击时的所有单击事件，因此删除第二次单击的事件操作。

如果要避免玩事件，而只是更改按钮的行为，则可以在事件处理程序中调用一个命名函数，然后根据其他按钮的单击次数对其进行更改。

$(document).ready(function(){
    var myClickHandler = function(){};
    $('btn').click(function(){myClickHandler();});

    function fire1(){
        myClickHandler = function(){
            window.alert("First Fire...");
        };
    }
    function fire2(){
        myClickHandler = function(){
            window.alert("Second Fire...");
        };
    }

    function fire3(){
        myClickHandler = function(){
            window.alert("Third Fire...");
        };
    }
});