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标签并没有继承点击事件,点击无任何反应。解决办法有两种:

  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
});

以上是关于jquery datables ajax分页后的点击事件无效是怎么回事的主要内容,如果未能解决你的问题,请参考以下文章

jquery在ajax新加入的元素后绑定事件click

分页后数据表jquery点击事件不起作用

jquery ajax 调用kkpager插件 异步加载重新生成分页后,点击页数还是跟首次加载一样

当内容'通过 AJAX 动态创建时,分页后不起作用

分页后的数据展示问题分析

laypage分页