Jquery 页面元素事件绑定
场景:
用一个Table来展示数据信息列表,通过鼠标点击Table中的Tr来获取到当前选中的数据行信息。
<table class="Table" width="100%" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<td>名称</td>
<td style="width: 100px;">题型</td>
<td style="width: 100px;">创建人</td>
<td style="width: 100px;">创建时间</td>
<td style="width: 100px;">最后修改人</td>
<td style="width: 100px;">最后修改时间</td>
<td style="width: 50px;">状态</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
情况1:数据信息是写死在页面上或者同步加载到页面。这时候需要绑定tr的点击事件,通常的做法是
$(function () {
$('.Table tbody tr').click(function(){
alert(1);
/*其他需要处理的事件信息*/
});
});
这种情况下是没有问题的。
情况2:数据信息是通过Ajax动态生成的。这时候如果还是采用上面的方法来绑定事件到动态生成的tr元素上,你会发现就算你把鼠标点烂了,那个alert提示框也不会出来。
原因:通过Ajax加载的数据信息是在 调用 .bind() 之后添加的,所以点击tr元素不会有任何效果。
有人说通过live可以解决这个问题,我们尝试一下看看效果
$(function () {
$('.Table tbody tr').live('click',function(){
alert(1);
/*其他需要处理的事件信息*/
});
});
试一下果然行,但是这只是把事件绑定到了动态生成的元素上面,如果我们的点击事件里面需要获取动态生成的元素属性值等信息。如下
$(function () {
$('.Table tbody tr').live('click',function(){
if ($(this).attr("class").indexOf("selected") != (-1)) {
$('.treeTable tr').removeClass("selected");
} else {
$('.treeTable tr').removeClass("selected");
$(this).addClass("selected");
}
}
});
});
我点我点我点点点,失效了吧!!!!
所以live方法能将事件绑定到动态生成的元素上,但是要获取动态生成元素的属性值时是不行的,至少我没成功。
这个时候我们需要 .delegate()来帮忙
$(document).delegate('.treeTable tbody tr', 'click', function () {
if ($(this).attr("class").indexOf("selected") != (-1)) {
$('.treeTable tr').removeClass("selected");
} else {
$('.treeTable tr').removeClass("selected");
$(this).addClass("selected");
}
});
一切问题都解决了。
Jquery 页面元素事件绑定的更多相关文章
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- html页面元素事件丢失
前段时间做网站包括最近用mvc做oa都发现这个奇怪现象,就是页面加载完毕后页面元素事件(比如按钮点击.复选框change)一切正常,但是当执行查询或者其他操作后页面事件丢失.具体原因暂没有时间分析,现 ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jquery 未来元素事件示例 on() delegate() live()
jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('& ...
- (Jquery)关于给动态加载的页面元素,绑定事件
如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...
- Jquery 页面元素动态添加后绑定事件丢失方法,非 live
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...
- 用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...
随机推荐
- Java-Maven-Runoob:Maven POM
ylbtech-Java-Maven-Runoob:Maven POM 1.返回顶部 1. Maven POM POM( Project Object Model,项目对象模型 ) 是 Maven 工 ...
- HTTP 与TCP/IP 、Socket区别(一)
网络由下往上分为: 物理层-- 数据链路层-- 网络层-- IP协议 传输层-- TCP协议 会话层-- 表示层和应用层-- HTTP协议 1.TCP/IP连接 手机能够使用联网功能是因为手机底层实现 ...
- Android BindService中遇到的一个小问题
今天在使用BindService的时候遇到个小问题,我希望通过Bindservice获取到这个服务,然后执行服务内的某个自定义方法,如下: if(bindService==null){ Intent ...
- Oray.com花生壳路由器配置注意
当路由器不链接wan口,只链接lan口时,此路由器其实就是当做一个无线交换机使用了,在此种情况下,花生壳登录会失败,因为花生壳本身也认为这设备不是路由器.
- Python之二维数组N*N顺时针旋转90度
需求:把一个二维数组顺时针旋转90度,现实数据的替换. 比如把4*4的二维数组顺时针旋转90度 原始数据是一个嵌套列表:[['A', 'B', 'C', 'D'], ['A', 'B', 'C', ' ...
- 判断手机使用网络wifi 2G 3G
ConnectivityManager cManager = (ConnectivityManager) this .getSystemService(Context.CONNECTIVITY_SER ...
- elasticsearch2.x插件之一:marvel(配置)
Marvel是Elastic公司推出的商业监控方案,是用来监控Elasticsearch集群,历史状态的有力工具,便于性能优化以及故障诊断.监控主要分为六个层面,分别是集群层.节点层.索引层.分片层. ...
- 【codevs2495】水叮当的舞步
题目描述 Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物,更加特别的是,地毯上格子的颜色还能随着踩踏而改变.为了讨好她的偶像虹猫,水叮当决定在地毯上跳一支轻盈的舞来卖萌~~~ ...
- Codeforces 1109D (树的计数问题)
思路看这篇博客就行了:https://www.cnblogs.com/zhouzhendong/p/CF1109D.html, 讲的很好 今天学到了prufer编码,这是解决树上计数问题的一大利器,博 ...
- 运单waybill快速录入
运单waybill快速录入 前台页面: 1修改页面onAfterEdit事件, 后台代码:ajax响应回请求1 为成功,0 为失败