JQuery動態生成的按鈕無法觸發問題與解決方法 起因: 利用JQuery動態添加的按鈕無法通過$(selector).click方法觸發點擊事件 //在網頁載入完成後動態添加表格 $(function () { //通過Ajax向後臺請求程式 $.ajax({ method : "post", u ...
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+'" class="upd-btn">修改</button>'
let del = '<button value="'+uid+'" class="del-btn">刪除</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 (){
})