jQuery undelegate() 方法

jQuery 事件undelegate() 方法用於從元素中刪除一個或多個事件處理程式，特別是那些以前使用 delegate() 方法新增的事件處理程式。

undelegate() 方法在 jQuery 3.0 版本中已棄用。您可以使用 off() 方法代替。

語法

以下是 jQuery 事件undelegate() 方法的語法：

$(selector).undelegate(childSelector, event, handler)

引數

此方法接受三個引數：'childSelector'、'event' 和 'handler'，如下所述：

childSelector (可選) - 要從中刪除事件處理程式的子元素的選擇器。
event (可選) - 指定要從所選元素中刪除的一個或多個事件型別，用空格分隔。
handler (可選) - 要刪除的特定事件處理程式函式。

返回值

此方法沒有任何返回值。

示例 1

以下是 jQuery 事件undelegate() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the Remove button event handler from <p> element.</p>
    <button>Remove</button>
    <script>
        $('body').delegate("p", "click", function(){
            alert("Event handler added to click event");
        });
        $('button').click(function(){
            $('body').undelegate("p", "click");
            alert("Removed....!");
        })
    </script>
</body>
</html>

輸出

上述程式顯示了一個<p>元素和一個按鈕，當用戶點選“p”元素時，會向點選事件新增一個事件處理程式；當用戶點選按鈕時，會從<p>元素中刪除事件處理程式。

示例 2

從元素中刪除所有事件處理程式。

這是 jQuery undelegate() 方法的另一個示例，它用於刪除以前新增到所選元素的所有事件處理程式：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            background-color: green;
            padding: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>This is h1 heading (mouseenter event)</h1>
    <p>This is paragraph (click event)</p>
    <div>Hello TP (mouseout event)</div><br>
    <button>Remove all</button><span></span>
    <script>
        $('body').delegate("h1", "mouseenter", function(){
            $(this).css("color", "green");
        });
        $('body').delegate("p", "click", function(){
            $(this).css("color", "red");
        });
        $('body').delegate("div", "mouseout", function(){
           alert("Mouseout from div element");
        });
        $('button').click(function(){
            $('body').undelegate();
            $('span').text("Removed....!");
        })
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示一個<h1>、<p>、<div>和一個按鈕元素。我們使用 delegate() 方法向這些元素（除了按鈕）添加了事件處理程式。單擊按鈕時，將刪除所有事件處理程式。

示例 3

刪除特定的事件處理程式函式：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p{
            width: 200px;
            padding: 10px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click me to say Hello.!!</p>
    <button>Remove event handler</button>
    <script>
        var myHandler = function(){
            alert("Hello.!!");
        }
        $('body').delegate("p", "click", myHandler);
        $('button').click(function(){
            $('body').undelegate("p", "click");
            alert("Removed.!!");
        })
    </script>
</body>
</html>

輸出

程式執行後，將顯示一條訊息和一個按鈕。當用戶單擊訊息時，將向點選事件新增一個特定的事件處理程式，觸發一個彈出警報。隨後，當單擊按鈕時，將刪除該事件處理程式。

jquery_ref_events.htm

列印頁面