场景:

用一个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 页面元素事件绑定的更多相关文章

  1. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  4. html页面元素事件丢失

    前段时间做网站包括最近用mvc做oa都发现这个奇怪现象,就是页面加载完毕后页面元素事件(比如按钮点击.复选框change)一切正常,但是当执行查询或者其他操作后页面事件丢失.具体原因暂没有时间分析,现 ...

  5. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  6. jquery 未来元素事件示例 on() delegate() live()

    jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('& ...

  7. (Jquery)关于给动态加载的页面元素,绑定事件

    如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...

  8. Jquery 页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...

  9. 用jQuery.delegate()将事件绑定在父元素上面

    1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...

随机推荐

  1. Java-Maven-Runoob:Maven POM

    ylbtech-Java-Maven-Runoob:Maven POM 1.返回顶部 1. Maven POM POM( Project Object Model,项目对象模型 ) 是 Maven 工 ...

  2. HTTP 与TCP/IP 、Socket区别(一)

    网络由下往上分为: 物理层-- 数据链路层-- 网络层-- IP协议 传输层-- TCP协议 会话层-- 表示层和应用层-- HTTP协议 1.TCP/IP连接 手机能够使用联网功能是因为手机底层实现 ...

  3. Android BindService中遇到的一个小问题

    今天在使用BindService的时候遇到个小问题,我希望通过Bindservice获取到这个服务,然后执行服务内的某个自定义方法,如下: if(bindService==null){ Intent ...

  4. Oray.com花生壳路由器配置注意

    当路由器不链接wan口,只链接lan口时,此路由器其实就是当做一个无线交换机使用了,在此种情况下,花生壳登录会失败,因为花生壳本身也认为这设备不是路由器.

  5. Python之二维数组N*N顺时针旋转90度

    需求:把一个二维数组顺时针旋转90度,现实数据的替换. 比如把4*4的二维数组顺时针旋转90度 原始数据是一个嵌套列表:[['A', 'B', 'C', 'D'], ['A', 'B', 'C', ' ...

  6. 判断手机使用网络wifi 2G 3G

    ConnectivityManager cManager = (ConnectivityManager) this .getSystemService(Context.CONNECTIVITY_SER ...

  7. elasticsearch2.x插件之一:marvel(配置)

    Marvel是Elastic公司推出的商业监控方案,是用来监控Elasticsearch集群,历史状态的有力工具,便于性能优化以及故障诊断.监控主要分为六个层面,分别是集群层.节点层.索引层.分片层. ...

  8. 【codevs2495】水叮当的舞步

    题目描述 Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物,更加特别的是,地毯上格子的颜色还能随着踩踏而改变.为了讨好她的偶像虹猫,水叮当决定在地毯上跳一支轻盈的舞来卖萌~~~ ...

  9. Codeforces 1109D (树的计数问题)

    思路看这篇博客就行了:https://www.cnblogs.com/zhouzhendong/p/CF1109D.html, 讲的很好 今天学到了prufer编码,这是解决树上计数问题的一大利器,博 ...

  10. 运单waybill快速录入

    运单waybill快速录入 前台页面: 1修改页面onAfterEdit事件, 后台代码:ajax响应回请求1 为成功,0 为失败