jquery datables ajax分页后的点击事件无效是怎么回事

异步请求数据后,动态向table中追加行,行点击事件失效

动态加入到DOM中的对象无法继承原有的事件,所以无效,举例:

// $.ajax... ajax部分省略

var tr = "";

if(data.length){

    for(var i=0; i<data.length; i++){

        tr = ‘<tr>‘;

        tr += ‘<td>‘ + data.status == 0 ? "正常" "报警" ‘<td>‘;

        tr += ‘</tr>‘;

        $("#table1").find("tbody").append(tr);

    }  

}

// tr的点击事件

$("#table1 tbody").find("tr").click(function(){

    // do something

});

上面的例子中,table1中原有的tr标签有点击事件,而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件,点击无任何反应。解决办法有两种:

  1. 纯js方法:将tr的点击事件写成函数,然后为动态创建的tr标签添加该函数的onclick事件
  • for(var i=0; i<data.length; i++){

            tr = ‘<tr onclick="OnTrClick()">‘// 创建时为tr指定<a href="https://www.baidu.com/s?wd=click%E4%BA%8B%E4%BB%B6&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4mHNBmWR3nH99nHRsujcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHRknHm1njckn1RdnWmLnHnsn0" target="_blank" class="baidu-highlight">click事件</a>

            tr += ‘<td>‘ + data.status == 0 ? "正常" "报警" ‘<td>‘;

            tr += ‘</tr>‘;

            $("#table1").find("tbody").append(tr);

    }

  • jquery方法:jquery中可使用live()、on()两个方法来完成类似效果,其原理是利用事件委派机制,需要注意的是jquery 1.9版本已不再支持live()方法。
  1. // tr的点击事件 (jquery 1.9以下)

    $("#table1 tbody").find("tr").live("click"function(){

        // do something

    });

// tr的点击事件【推荐】 (jquery 1.7以上)

$("#table1 tbody").find("tr").on("click"function(){

    // do something

});

时间: 2024-08-28 02:37:30

jquery datables ajax分页后的点击事件无效是怎么回事的相关文章

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.

$("#diva").click(function(){ $("#divb").unbind("click").click(function(){ alert("www.lao8.org 提供代码."); }); }); jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效 Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了. 理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行. 原因 问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,

用到afinal注解的项目代码混淆后某些控件view点击事件无效问题

最近一个项目上线,要求代码混淆,可混淆后某些控件的点击事件无效,后来发现是afinal注解的问题.查了半天资料,后来又问了afinal的相关人员,他们给出的解决方案是排除混淆被注解的类,这样的话意味着基本所有的activity和fragment都不能混淆,这不是我想要的. 后来反编译代码比较排除被注解的类和不排除被注解类的区别,比较发现,那些不能点击的控件的定义代码被优化掉了,被优化掉的原因就是因为用注解后,在代码中该控件的实例没有其他地方用到,所以程序就认为该代码没有被用到,就被注视掉了. 知

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题 我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置

Android 7.0 TextView点击事件无效修复方案

public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLooper()); public PostTextView(Context context) { super(context); } public PostTextView(Context context, AttributeSet attrs) { super(context, attrs); } p