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

打印页面