js追加html 有点击事件,jQuery为动态按钮、div、tr添加点击(click)事件

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

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

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

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

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

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

• One
• Two

.......

.......

这里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事件。

row 1 col 1	row 1 col 2
row 2 col 1	row 2 col 2

..........

..........

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提供了更好的方法，没有它的缺点。