卡卡網(wǎng)

在動(dòng)態(tài)添加的元素HTML標(biāo)記上綁定點(diǎn)擊事件，這篇文章解釋了如何為動(dòng)態(tài)添加元素添加click事件。

在jQuery點(diǎn)擊事件中，我們可以簡單地使用.click()方法，它可以很好地工作，但是當(dāng)你添加動(dòng)態(tài)HTML并嘗試為它實(shí)現(xiàn)點(diǎn)擊事件時(shí)，那么你就會(huì)遇到問題例如.click()無效。 .click()沒有工作因?yàn)樗鼪]有加載到dom上，所以現(xiàn)在我們要做的是使用jQuery v1.7的.on()方法。 .on()方法將事件處理程序附加到j(luò)Query對(duì)象中。

原型 : .on( events [, selector ] [, data ], handler )

描述：將一個(gè)或多個(gè)事件的事件處理函數(shù)附加到所選元素。

示例1：為動(dòng)態(tài)添加的li標(biāo)記添加單擊事件

HTML標(biāo)記：這里我們有個(gè)UL列表標(biāo)記，然后添加動(dòng)態(tài)LI標(biāo)記。

<ul id="myUL">
  <li>One</li>
  <li>Two</li>
  .......
  .......
</ul>

這里myUL-是頁面加載時(shí)已經(jīng)存在于dom的id。

那么現(xiàn)在如何在jQuery中對(duì)這個(gè)動(dòng)態(tài)添加的元素實(shí)現(xiàn)click事件呢？

Jquery：現(xiàn)在通過使用.on()將能夠在動(dòng)態(tài)添加的HTML標(biāo)記上綁定click事件，例如給動(dòng)態(tài)添加的li標(biāo)記綁定click事件。

$('#myUL').on('click','li', function(){
  console.log('you clicked me');
});

示例2：jQuery單擊事件用于動(dòng)態(tài)添加的tr、div等

HTML標(biāo)記：這里我們有個(gè)HTML表，并且動(dòng)態(tài)增加了tr表行，現(xiàn)在我們要使用jQuery .on()方法為動(dòng)態(tài)tr表行綁定click事件。

<table id="myTable">
  <tr><td>row 1 col 1</td><td>row 1 col 2</td></tr>
  <tr><td>row 2 col 1</td><td>row 2 col 2</td></tr>
  ..........
  ..........
</table>

Jquery：這里myTable是我的表id，在每個(gè)動(dòng)態(tài)添加的tr上我們可以綁定click事件，如下面的代碼所示。

$('#myTable').on('click','tr', function() {
  alert($(this).text());
});

//對(duì)div也一樣
//注: .itemName是父div如myDiv里動(dòng)態(tài)添加的class
$('#myDiv').on('hover','.itemName', function() {
  alert($(this).text());
});

這里myDiv是父div的id。

對(duì)于jQuery低于1.7的版本

我們使用.live()，此方法在1.7已被棄用，在1.9被刪除了。

原型: .live(events, handler)

描述：為現(xiàn)在和將來與當(dāng)前選擇器匹配的所有元素附加事件處理程序。

$('#myUL li').live('click', function() {
  alert('hello!');
});

注意：不再推薦使用.live()方法，因?yàn)楦甙姹镜膉Query提供了更好的方法，沒有它的缺點(diǎn)。

標(biāo)簽: JQuery  button  click-event