溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了jQuery動態添加元素無法觸發綁定事件的解決方法。分享給大家供大家參考，具體如下：
最近遇到一個問題，即當用jquery動態添加元素后，發現給動態添加的元素卻無法觸發事件。后來在網上查閱了一些資料，發現原來要這樣處理：
先上我出錯的代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" > <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){ //這里是動態添加元素 $(".add").click(function(){ var btn = $("<button class='newBtn btn btn-default'>新按鈕</button>"); $("body").append(btn); })<br><br>//這里是為添加的元素添加事件 $(".newBtn").click(function(){ alert("這里是新添加的元素觸發的事件"); }) }) </script> </head> <body> <button class=" add btn btn-default">添加按鈕</button> </body> </html>
奉上我的解決方法
方法一：綁定live事件(live事件只在jquery1.9以下才支持，高版本不支持)。
$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
alert('這里是動態元素添加的事件');
})
方法二：利用on()事件綁定($(ParentEle).on("click",".thisEle",function(){})
$("body").on("click", ".newBtn", function() {
alert('這里是動態元素添加的事件');
});
//這里的ParentEle是 thisEle的父輩元素或者祖先元素，ParentEle可以是document，也可以是body等。
//注意：如果此時調用的函數是外部定義好的函數，那在調用的時候不要加()，不然會跳過點擊事件直接觸發函數
$("body").on("click", ".newBtn",aa );
function aa(){
alert('這里是動態元素添加的事件');
}
ok，問題解決，繼續爬坑。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
