卡卡网

在动态添加的元素HTML标记上绑定点击事件，这篇文章解释了如何为动态添加元素添加click事件。

在jQuery点击事件中，我们可以简单地使用.click()方法，它可以很好地工作，但是当你添加动态HTML并尝试为它实现点击事件时，那么你就会遇到问题例如.click()无效。 .click()没有工作因为它没有加载到dom上，所以现在我们要做的是使用jQuery v1.7的.on()方法。 .on()方法将事件处理程序附加到jQuery对象中。

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

描述：将一个或多个事件的事件处理函数附加到所选元素。

示例1：为动态添加的li标记添加单击事件

HTML标记：这里我们有个UL列表标记，然后添加动态LI标记。

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

这里myUL-是页面加载时已经存在于dom的id。

那么现在如何在jQuery中对这个动态添加的元素实现click事件呢？

Jquery：现在通过使用.on()将能够在动态添加的HTML标记上绑定click事件，例如给动态添加的li标记绑定click事件。

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

示例2：jQuery单击事件用于动态添加的tr、div等

HTML标记：这里我们有个HTML表，并且动态增加了tr表行，现在我们要使用jQuery .on()方法为动态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，在每个动态添加的tr上我们可以绑定click事件，如下面的代码所示。

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

//对div也一样
//注: .itemName是父div如myDiv里动态添加的class
$('#myDiv').on('hover','.itemName', function() {
  alert($(this).text());
});

这里myDiv是父div的id。

对于jQuery低于1.7的版本

我们使用.live()，此方法在1.7已被弃用，在1.9被删除了。

原型: .live(events, handler)

描述：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

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

注意：不再推荐使用.live()方法，因为更高版本的jQuery提供了更好的方法，没有它的缺点。

标签: JQuery  button  click-event