工作積累（六）——jQuery實(shí)現(xiàn)DOM元素事件動(dòng)態(tài)綁定

用 jQuery 為DOM元素綁定事件時(shí)，如果用下面這種方式：

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)肥鄉(xiāng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

<button class="dynamic-bind">按鈕一</button>
$(function() {
  $('.dynamic-bind').on('click', function(e) {
    alert(e.type); //’click’
});
});

那么如果在綁定事件之后通過 jQuery 添加與該選擇器相同的新的DOM元素：

$('.dynamic-bind:last').after('<buttonclass="dynamic-bind">按鈕二</button>');

則在瀏覽器中點(diǎn)擊 按鈕二時(shí)，不會(huì)彈出 alert 提示，然而，通過 jQuery 添加DOM元素是十分常用的，這一問題必須要解決，通常來說有以下兩種方法。

 

1.將綁定事件封裝到方法中：

var dynamicBind = function($element, event) {
  $element.on(event, function(e) {
    alert(e.type);
  });
};

然后在每次用jQuery 添加DOM元素后調(diào)用該方法：

$('.dynamic-bind:last').after('<buttonclass="dynamic-bind">按鈕二</button>');
dynamicBind($('.dynamic-bind:last'), 'click');

這樣做雖然解決了問題，但是每添加一次DOM元素都要調(diào)用一次綁定事件的方法，不僅容易亂而且太 low 。

 

2.使用jQuery的事件委派機(jī)制：

所謂 jQuery 的事件委派機(jī)制，可以簡單理解為jQuery 會(huì)自動(dòng)為匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是在委派聲明之后被添加的。這里仍舊用 on 來委派事件，只是參數(shù)略有不同：

$(document).on('click', '.dynamic-bind', 'Hello', function(e) {
  alert(e.data); //'Hello'
});

這樣一來，無論之后用jQuery 添加多少個(gè) <button class=”dynamic-bind”></button>，jQuery 都會(huì)自動(dòng)為其綁定該 click 事件，問題得以完美解決。需要注意的是，這里的‘Hello’ 參數(shù)不是必傳的，如果傳入則會(huì)賦值到 e.data ，這里傳入只是為了對 event 對象做一下了解。

 

補(bǔ)充：

1.在早期的 jQuery 版本中，事件委派和解除委派使用的是 .live().die() .delegate() .undelegate() ，大約在 jQuery 1.9 之后的版本中這些方法都被取消，取而代之的是 .on() .off() 方法，如果在高版本的 jQuery 中使用 .live() 等方法會(huì)拋出異常。

2.在事件委派時(shí)，并不一定只能使用 $(document).on(…); 方式，這里的 $(document) 可以為任何被委派對象的父DOM元祖，如：

<div id="btn-father">
  <button class="dynamic-bind">按鈕一</button>
</div>

則事件委派時(shí)也可以寫為：

$('#btn-father').on('click', '.dynamic-bind', 'Hello', function(e) {
  alert(e.data);
});

完。

 

參考資料：

http://www.zhidao91.com/jquery-on-no-effective/

分享文章：工作積累（六）——jQuery實(shí)現(xiàn)DOM元素事件動(dòng)態(tài)綁定
瀏覽路徑：http://muchs.cn/article8/gpjpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、微信小程序、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)