異步請求數據后,動態向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
});
|
詳細介紹請查看全文：https://cnblogs.com/qianzf/
原文博客的鏈接地址：https://cnblogs.com/qzf/