本文實例講述了jQuery動態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法。分享給大家供大家參考，具體如下：
最近遇到一個問題，即當(dāng)用jquery動態(tài)添加元素后，發(fā)現(xiàn)給動態(tài)添加的元素卻無法觸發(fā)事件。后來在網(wǎng)上查閱了一些資料，發(fā)現(xiàn)原來要這樣處理：
先上我出錯的代碼:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" rel="external nofollow" > <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){//這里是動態(tài)添加元素 $(".add").click(function(){ var btn = $("<button class='newBtn btn btn-default'>新按鈕</button>"); $("body").append(btn); })<br><br>//這里是為添加的元素添加事件 $(".newBtn").click(function(){ alert("這里是新添加的元素觸發(fā)的事件"); }) }) </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('這里是動態(tài)元素添加的事件');})方法二：利用on()事件綁定($(ParentEle).on("click",".thisEle",function(){})
$("body").on("click", ".newBtn", function() { alert('這里是動態(tài)元素添加的事件');});//這里的ParentEle是 thisEle的父輩元素或者祖先元素，ParentEle可以是document，也可以是body等。//注意：如果此時調(diào)用的函數(shù)是外部定義好的函數(shù)，那在調(diào)用的時候不要加()，不然會跳過點擊事件直接觸發(fā)函數(shù)$("body").on("click", ".newBtn",aa );function aa(){ alert('這里是動態(tài)元素添加的事件');}ok，問題解決，繼續(xù)爬坑。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
