1. 程式人生 > >jQuery事件多次繫結與解綁

jQuery事件多次繫結與解綁

jQuery事件繫結很常見,相信大家經常會用到click、focus、blur等事件,但是如果對控制元件的某個事件繫結多個方法會是怎樣的結果呢,覆蓋、累加、或其他效果?今天我就來驗證一下這個疑問並說說如何解綁。

一、jQuery事件多次繫結

<head>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //第二次繫結
            $("#btnAdd").click(function () {
                alert("bind click1");
            });

            //第三次繫結
            $("#btnAdd").on("click", function () {
                alert("bind click2");
            });

            //第四次繫結
            $("#btnAdd").bind("click", function () {
                alert("bind click3");
            });
        });

        function add1() {
            alert("add1()");
        }
    </script>
</head>
<body>
    <h2>UserController->Index</h2>
    <!--第一次繫結-->
    <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
</body>

驗證結果:對控制元件的某個事件進行多次繫結效果會疊加,截圖如下:

 

二、jQuery事件解綁

既然能繫結事件,那應該也能對事件解綁,下面展示解綁的方法:

<head>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAdd").click(function () {
                alert("bind click1");
            });

            $("#btnAdd").on("click", add2);

            $("#btnAdd").bind("click", add3);
        });

        function add1() {
            alert("add1()");
        }

        function add2() {
            alert("bind click2");
        }

        function add3() {
            alert("bind click3");
        }

        function cancelBind() {
            //不指定方法名則解綁click事件對應的所有方法,標籤內onclick設定的方法仍會執行
            //$("#btnAdd").off("click");
            //$("#btnAdd").unbind("click");

            //解綁click事件對應的add2方法
            $("#btnAdd").off("click", add2);
            //$("#btnAdd").unbind("click", add3);
        }
    </script>
</head>
<body>
    <h2>UserController->CancelBind</h2>
    <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
    <input type="button" id="btnCancelBind" name="btnCancelBind" value="CancelBind" onclick="cancelBind()" />
</body>