JQuery動態生成的按鈕無法觸發問題與解決方法
起因:
利用JQuery動態添加的按鈕無法通過$(selector).click方法觸發點擊事件
//在網頁加載完成后動態添加表格
$(function () {
//通過Ajax向后臺請求程式
$.ajax({
method : "post",
url : "all-user",
dataType : "json",
success: function (data) {
const userList = data;
//遍歷結果集
for (let i = 0; i < userList.length; i++){
let uid = userList[i].uid
let upd = '<button value="'+uid+'" >修改</button>'
let del = '<button value="'+uid+'" >洗掉</button>'
let status = ""
if (userList[i].status == 0){
status = "審核中"
}else if (userList[i].status == 1){
status = "審核通過"
}else if (userList[i].status == 2){
status = "審核被拒絕"
}
//添加模板
let td = "<tr>"+
"<td>#{uid}</td>"+
"<td>#{username}</td>"+
"<td>#{password}</td>"+
"<td>#{status}</td>"+
"<td>#{update}</td>"+
"<td>#{delete}</td>"+
"</tr>"
//填充引數
td = td.replace(/#{uid}/g,uid)
td = td.replace(/#{username}/g,userList[i].username)
td = td.replace(/#{password}/g,userList[i].password)
td = td.replace(/#{status}/g, status)
td = td.replace(/#{update}/g, upd)
td = td.replace(/#{delete}/g, del)
//.append追加
$("#tb").append(td)
}
}
})
//撰寫按鈕的點擊事件,使用.click()方法,按鈕點擊后沒有反應
$(".del-btn").click(function () {
alert(this.value)
})
})
原因:
append中的節點是在整個檔案加載完之后開始添加的，
因此頁面不會為append的元素初始化添加點擊事件
解決方法:
使用$(document).on()方法添加點擊事件
$(document).on("click",".del-btn",function (){
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542730.html
標籤：jQuery