1. 程式人生 > >jQuery給動態生成的元素新增事件

jQuery給動態生成的元素新增事件

有時需要向頁面內動態新增元素,其中可能還需要給這些追加的元素繫結事件,這時候採用jquery是很方便的。
1、採用live()方法(該方法於1.7版本後廢棄):
live()方法可以給所有元素附加一個事件處理函式,甚至包含動態新增的元素,其採用事件委託的處理方式,事件委託的原理是(如點選元素):
點選某個元素,因為該元素並未繫結任何事件處理函式,事件由DOM樹冒泡到綁定了特殊事件處理函式的上層節點(一般是根節點),執行特殊的事件處理函式,這個特殊函式檢測是哪個元素被點選,並可判斷該元素是否符合某一條件,若符合條件,則在該元素上執行一個事件處理函式。
例如:

$("li").live({
  click: function
() {
// do something on click }, mouseover: function() { // do something on mouseover } });

2、採用delegate()方法
delegate()方法可作為live()方法的替代,使得每次事件繫結到特定的DOM元素,不一定就是根節點,例如:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

3、採用on()方法
在jQuery 1.7中,.on()方法 提供繫結事件處理程式所需的所有功能。幫助從舊的jQuery事件方法轉換,例如:

$("table").on("hover", "td", function(){
    $(this).toggleClass("hover");
});

還有一種情況,我們需要給動態生成的元素新增外掛方法,這裡以Timepicker為例,一般情況下我們是這樣呼叫的:

$('#timeEle').timepicker({
    maxHours : 24,
    minuteStep: 1,
    secondStep: 1,
    minuteStep: 1,
    appendWidgetTo: 'body',
    showSeconds: true,
});

如果id為timeEle的元素是動態生成的,這樣呼叫就不行了,可以參照上面的幾種方法,結合外掛的方法特點及本身專案所需體驗對程式碼稍加改善(這裡結合專案體驗的特點繫結為滑鼠移動事件):

$(document).on('mousemove','#timeEle',function(){
    $(this).timepicker({
        maxHours : 24,
        minuteStep: 1,
        secondStep: 1,
        minuteStep: 1,
        appendWidgetTo: 'body',
        showSeconds: true,
    });
    return false;
});

相關推薦

jQuery動態生成元素新增事件

有時需要向頁面內動態新增元素,其中可能還需要給這些追加的元素繫結事件,這時候採用jquery是很方便的。 1、採用live()方法(該方法於1.7版本後廢棄): live()方法可以給所有元素附加一個事件處理函式,甚至包含動態新增的元素,其採用事件委託的處理

jQuery使用on()繫結動態生成元素事件無效的問題

jQuery的on()方法可以繫結動態生成元素的事件,但是在實際使用時發現無效。如下HTML: 1 2 3 <p> <a>123</a> </p> 使用如下方式,對靜態元素有效,但是繫結動態

Jquery動態新增元素繫結事件:live() delegate() on()

給已存在的元素繫結事件時可以直接寫: $(".class a").click(function(){ }) 但是對於動態生成並append()到頁面上的元素來說,就不能直接用上面的方法來繫結事件了。 在Jquery 1.7之前我們可以通過live()和delega

Angular如何動態生成元素綁定事件

con 舉例 pla tex hello 官方 字符串 頁面 get 在AngularJS中,操作DOM一般在指令中完成,事件監聽機制是在對於已經靜態生成的dom綁定事件,而如果在指令中動態生成了DOM節點,動態生成的節點不會被JS事件監聽。 舉例來說: angular.

開發過程中用Zepto/jquery未來元素新增事件,live()無法使用解決方法

 通過 live() 方法附加的事件處理程式適用於匹配選擇器的當前及未來的元素(比如由指令碼建立的新元素)。 live() 方法為被選元素附加一個或多個事件處理程式,並規定當這些事件發生時執行的函式。 $("button").live("click",function(){ $

Jquery 動態添加元素添加點擊事件

直接 query tlist cto n) tor listener 指定 text 給動態添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,給選擇器指定的子元素添加事件處理函數,並非選擇器本身; 1. 語法 $(selector).on(event,

AngularJS中,如何動態生成元素繫結事件

1 . 我們知道在jquery中,動態生成一個元素,如果要在動態生成元素的同時,動態繫結事件,可以通過live/on方法(在jquery3.0中已經廢除了bind方法)。 2 . 在angularjs中,操作DOM一般在指令中完成,事件監聽機制是在對於已經靜態

利用jquery動態載入的元素繫結事件

工作中經常會遇見利用ajax載入dom元素,這樣就不能給動態載入的元素繫結時間 此時可以利用jquery的on方法解決(老版本使用live方法) $(document).on("click",".edit-btn",function(){             aler

jQuery on()方法動態生成元素繫結方法

bind()   $("p").bind("click",function(){     alert("The paragraph was clicked.");   });   $("p").on("click",function(){     alert("The paragraph was clic

如何為頁面動態生成元素新增事件(如append()動態新增的標籤)

這是一個上傳圖片的頁面,我們要在前臺用JS驗證上傳的圖片是否合法,且能夠動態生成多個上傳框。 原始碼: <code> <script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery-1.

如何動態元素新增事件

要給動態新增的元素新增事件,可以給其父元素新增事件。這樣若是在冒泡事件下,點選事件由子元素傳遞到父元素,就會觸發父元素上繫結的事件函式,在函式裡做一下過濾,便可實現想要的功能。(在捕獲事件裡也是同樣的道理) 以下分三種事件舉例。JavaScript事件有HEML事件、DOM

動態動態生成元素繫結事件不生效解決方法

JQ動態生成的元素,無法繫結事件,查詢到的原因是:繫結事件的元素必須是構造頁面時已經存在的,假如構造元素是不存在,是後動態生成,則繫結不了,解決方法,通過on()繫結舉例:$("body").on("c

jQuery獲取動態生成元素

fun ast tails 生成 console ron sni 獲取 data 需求描寫敘述:頁面上能夠動態加入數據,比方table,點擊按鈕能夠動態加入行。又或頁面載入時table數據是通過ajax從後臺獲取的。而這時我們想要獲取當中的某個值,又該怎樣獲取呢?假設是

關於jQuery動態生成的點擊事件觸發兩次的討論

get com pan .html 方法 執行 url wall itl 由於是動態生成的 點擊事件運用了jQuery裏面的on()方法,綁定在body上面,結果在程序裏面運行了兩次。參考了博客 利用on和off方法編寫高效的js代碼知道了很多在dom對象刪除以後,其聲明

前端----通過js相同class的元素新增事件

寫網頁時我們可能一組元素增加一個相同的事件, 比如下圖的下拉選單中每項都有一個滑鼠懸停事件和滑鼠懸出事件(onmouseover和onmouseout事件) 不會的同學可以看看介紹這兩個事件的一個小例項部落格 https://blog.csdn.net/q5706503/article/

React map生成元素新增點選事件繫結this

問題使用.map(function(Item)生成元素新增onClick事件:onClick={this.provinceChange.bind(this, "99")}時,前臺訪問報錯:Uncaught TypeError: Cannot read property 'provinceChange' of

jQuery on() 方法—向未建立的元素新增事件處理程式

向未來的元素新增事件處理程式(演示 on() 方法也適用於尚未建立的元素) <!DOCTYPE html> <html> <head> <scri

jQuery動態建立元素節點無法觸發事件

通過jquery動態生成了一個按鈕 $(this).html('<a id="register" href="javascript:;">註冊</a>').addClass("

jQuery class附點擊事件獲取對應的索引

進行 ntb query 索引 其他 nbsp 有用 point 但是 有一類div標簽,class為pointbox,數量不等,有多個。我需要在點擊某一個標簽的時候實時獲取該標簽在這類標簽中索引值,以便進行其他操作。 代碼很簡單: $(".pointbox").click

js生成元素事件不執行問題

onclick body type blog txt work 輸入框 doc tom 要求:雙擊span標簽,可以修改。<div class="commands_ticketmiddl_ine_new" > <span>NO:</spa