卡卡網(wǎng)

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

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

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

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

示例1：為動態(tài)添加的li標記添加單擊事件

HTML標記：這里我們有個UL列表標記，然后添加動態(tài)LI標記。

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

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

那么現(xiàn)在如何在jQuery中對這個動態(tài)添加的元素實現(xiàn)click事件呢？

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

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

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

HTML標記：這里我們有個HTML表，并且動態(tài)增加了tr表行，現(xiàn)在我們要使用jQuery .on()方法為動態(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，在每個動態(tài)添加的tr上我們可以綁定click事件，如下面的代碼所示。

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

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

這里myDiv是父div的id。

對于jQuery低于1.7的版本

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

原型: .live(events, handler)

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

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

注意：不再推薦使用.live()方法，因為更高版本的jQuery提供了更好的方法，沒有它的缺點。

標簽: JQuery  button  click-event