Question

<!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>

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

Answer 1

发生这种情况是因为您在点击中取消绑定了事件...

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...");
        };
    }
});

功能变得不稳定

1 个答案: