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

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


用法 
.live( events, handler ) => jQuery

版本已棄用：1.7，已刪除：1.9

說明：為現在和將來匹配當前選擇器的所有元素附加一個事件處理程序。

  • 添加的版本：1.3.live( events, handler )

    • events
      類型：String
      包含 JavaScript 事件類型的字符串，例如 "click" 或 "keydown." 從 jQuery 1.4 開始，該字符串可以包含多個以空格分隔的事件類型或自定義事件名稱。
    • handler
      類型：Function(Event eventObject)
      觸發事件時執行的函數。

  • 添加的版本：1.4.live( events [, data ], handler )

    • events
      類型：String
      包含 JavaScript 事件類型的字符串，例如 "click" 或 "keydown." 從 jQuery 1.4 開始，該字符串可以包含多個以空格分隔的事件類型或自定義事件名稱。
    • data
      類型：PlainObject
      包含將傳遞給事件處理程序的數據的對象。
    • handler
      類型：Function(Event eventObject)
      觸發事件時執行的函數。

  • 添加的版本：1.4.3.live( events )

    • events
      類型：PlainObject
      一個或多個 JavaScript 事件類型和為它們執行的函數的普通對象。

注意：這個 API 在 jQuery 1.9 中已經被移除；請改用 on() 。

此方法提供了一種將委托事件處理程序附加到頁麵的document 元素的方法，這在將內容動態添加到頁麵時簡化了事件處理程序的使用。有關詳細信息，請參閱 .on() 方法中對直接事件與委托事件的討論。

根據其後繼方法重寫.live() 方法很簡單；這些是對所有三種事件附件方法進行等效調用的模板：

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

events 參數可以是用空格分隔的事件類型名稱和可選名稱空間列表，也可以是事件名稱字符串和處理程序的對象。 data 參數是可選的，可以省略。例如，以下三個方法調用在函數上是等效的(但請參閱下麵的附加委托事件處理程序的更有效和高性能的方法)：

$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
  alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );  // jQuery 1.7+
});

不再推薦使用.live() 方法，因為更高版本的 jQuery 提供了更好的方法而沒有其缺點。特別是，使用 .live() 會出現以下問題：

  • jQuery 在調用 .live() 方法之前嘗試檢索選擇器指定的元素，在大型文檔上可能是 time-consuming。
  • 不支持鏈接方法。例如，$( "a" ).find( ".offsite, .external" ).live( ... ); 是 not 有效且無法按預期工作。
  • 由於所有.live() 事件都附加在document 元素上，因此事件在處理之前會采用最長和最慢的路徑。
  • 在移動 iOS(iPhone、iPad 和 iPod Touch)上click對於大多數元素，事件不會冒泡到文檔正文，並且不能與.live()不應用以下解決方法之一：
    1. 使用本機可點擊元素，例如 a 或 button ，因為它們都會冒泡到 document 。
    2. 使用 .on() 或 .delegate() 附加到 document.body 級別以下的元素，因為移動 iOS 確實在體內冒泡。
    3. 將 CSS 樣式 cursor:pointer 應用於需要冒泡點擊的元素(或包含 document.documentElement 的父元素)。但是請注意，這將禁用元素上的複製\粘貼，並使其在觸摸時突出顯示。
  • 在事件處理程序中調用 event.stopPropagation() 對停止附加在文檔下方的事件處理程序無效；該事件已經傳播到 document 。
  • .live() 方法以令人驚訝的方式與其他事件方法交互，例如，$( document ).off( "click" ) 刪除通過對 .live() 的任何調用附加的所有點擊處理程序！

對於仍在使用 .live() 的頁麵，此 version-specific 差異列表可能會有所幫助：

  • 在 jQuery 1.7 之前，要在使用 .live() 綁定後停止進一步的處理程序執行，處理程序必須返回 false 。調用 .stopPropagation() 不會完成此操作。
  • 作為jQuery 1.4 .live()方法支持自定義事件以及all JavaScript events that bubble.它還支持某些不會冒泡的事件，包括change,submit,focus和blur.
  • 在jQuery 1.3.x隻能綁定以下 JavaScript 事件：click,dblclick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover， 和mouseup.

例子：

取消默認操作並通過返回 false 來防止它冒泡。

$( "a" ).live( "click", function() {
  return false;
});

使用 preventDefault 方法僅取消默認操作。

$( "a" ).live( "click", function( event ) {
  event.preventDefault();
});

使用 .live() 綁定自定義事件。

$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});

使用一個對象綁定多個實時事件處理程序。請注意，.live() 為所有段落(甚至是新段落)調用 click、mouseover 和 mouseout 事件處理程序。

$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});

相關用法


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