jquery datables ajax分页后的点击事件无效是怎么回事
Posted 锋齐叶落
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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标签并没有继承点击事件,点击无任何反应。解决办法有两种:
-
纯js方法:将tr的点击事件写成函数,然后为动态创建的tr标签添加该函数的onclick事件:
// tr的点击事件【推荐】 (jquery 1.7以上) $( "#table1 tbody" ).find( "tr" ).on( "click" , function (){ // do something }); |
以上是关于jquery datables ajax分页后的点击事件无效是怎么回事的主要内容,如果未能解决你的问题,请参考以下文章