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

});

详细介绍请查看全文：https://cnblogs.com/qianzf/

原文博客的链接地址：https://cnblogs.com/qzf/