日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

JQuery動態生成的按鈕無法觸發問題及完美解決方法_jquery

作者：saffeer ? 更新時間： 2023-04-01 編程語言

起因:

利用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 (){
     
 })

補充:jquery中動態新增的元素節點無法觸發事件解決辦法

在使用jquery中動態新增的元素節點時會發現添加的事件是無法觸發的，我們下面就為各位來詳細的介紹此問題的解決辦法．

　　比如做一個ajax讀取留言列表的時候，每條留言后面有個回復按鈕，class為“reply”,如果你用的是$(".reply").click(function(){ //do something... })，想必后面通過ajax加載進來的列表中的回復按鈕，點擊事件會失效。

　　其實最簡單的方法就是直接在標簽中寫onclick=""，但是這樣寫其實是有點low的，最好的方式還是通過給類名綁定一個click事件。

解決jquery中動態新增的元素節點無法觸發事件的問題有兩種解決方法，如下：

方法一：使用live

　　live()函數會給被選的元素綁定上一個或者多個事件處理程序，并且規定當這些事件發生時運行的函數。通過live()函數適用于匹配選擇器的當前及未來的元素。比如，通過腳本動態創建的元素。

實現如下：

$('.liLabel').live('click', function(){
alert('OK');
});

方法二：使用on

　　可以通過on方法綁定事件，可以綁定到它的父級或者body中，實現如下：

$("#ulLabel").on('click','.liLabel',function(){
alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
alert('OK')
});

原文鏈接：https://www.cnblogs.com/saffeer/archive/2023/01/31/17078081.html

欄目分類
最近更新