技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

jQuery为动态按钮、div、tr添加点击(click)事件

作者:admin    时间:2019-4-28 16:56:0    浏览:

在动态添加的元素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  
  • IT热文
  • 站长推荐