當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .undelegate()用法及代碼示例


用法 
.undelegate() => jQuery

不推薦使用的版本：3.0

說明：根據一組特定的根元素，從與當前選擇器匹配的所有元素的事件中刪除一個處理程序。

  • 添加的版本：1.4.2.undelegate()

    • 此簽名不接受任何參數。

  • 添加的版本：1.4.2.undelegate( selector, eventType )

    • selector
      類型：String
      用於過濾事件結果的選擇器。
    • eventType
      類型：String
      包含 JavaScript 事件類型的字符串，例如 "click" 或 "keydown"

  • 添加的版本：1.4.2.undelegate( selector, eventType, handler )

    • selector
      類型：String
      用於過濾事件結果的選擇器。
    • eventType
      類型：String
      包含 JavaScript 事件類型的字符串，例如 "click" 或 "keydown"
    • handler
      類型：Function(Event eventObject)
      觸發事件時執行的函數。

  • 添加的版本：1.4.3.undelegate( selector, events )

    • selector
      類型：String
      用於過濾事件結果的選擇器。
    • events
      類型：PlainObject
      一個或多個事件類型的對象和以前綁定的函數以解除綁定。

  • 添加的版本：1.6.undelegate( namespace )

    • namespace
      類型：String
      一個包含命名空間的字符串，用於取消綁定所有事件。

從 jQuery 3.0 開始，.undelegate() 已被棄用。自 jQuery 1.7 起，它被 .off() 方法取代，因此不鼓勵使用它。

.undelegate() 方法是一種刪除已使用 .delegate() 綁定的事件處理程序的方法。

例子：

可以將事件綁定和取消綁定到彩色按鈕。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>undelegate demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<script>
function aClick() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .delegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .undelegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Does nothing..." );
});
</script>
 
</body>
</html>

演示：

要從所有段落中取消綁定所有委托事件，請編寫：

$( "p" ).undelegate();

要從所有段落中取消綁定所有委托的單擊事件，請編寫：

$( "p" ).undelegate( "click" );

要取消對一個先前綁定的處理程序的委托，請將函數作為第三個參數傳入：

var foo = function () {
  // Code to handle some kind of event
};
 
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).delegate( "p", "click", foo );
 
// ... foo will no longer be called.
$( "body" ).undelegate( "p", "click", foo );

通過命名空間解除所有委托事件的綁定：

var foo = function() {
  // Code to handle some kind of event
};
 
// Delegate events under the ".whatever" namespace
$( "form" ).delegate( ":button", "click.whatever", foo );
 
$( "form" ).delegate( "input[type='text'] ", "keypress.whatever", foo );
 
// Unbind all events delegated under the ".whatever" namespace
$( "form" ).undelegate( ".whatever" );

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .undelegate()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。