jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
本文實(shí)例講述了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法。分享給大家供大家參考,具體如下:
最近遇到一個(gè)問題,即當(dāng)用jquery動(dòng)態(tài)添加元素后,發(fā)現(xiàn)給動(dòng)態(tài)添加的元素卻無法觸發(fā)事件。后來在網(wǎng)上查閱了一些資料,發(fā)現(xiàn)原來要這樣處理:
先上我出錯(cuò)的代碼:
<!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(){ //這里是動(dòng)態(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('這里是動(dòng)態(tài)元素添加的事件'); })
方法二:利用on()事件綁定($(ParentEle).on("click",".thisEle",function(){})
$("body").on("click", ".newBtn", function() { alert('這里是動(dòng)態(tài)元素添加的事件'); }); //這里的ParentEle是 thisEle的父輩元素或者祖先元素,ParentEle可以是document,也可以是body等。 //注意:如果此時(shí)調(diào)用的函數(shù)是外部定義好的函數(shù),那在調(diào)用的時(shí)候不要加(),不然會(huì)跳過點(diǎn)擊事件直接觸發(fā)函數(shù)
$("body").on("click", ".newBtn",aa ); function aa(){ alert('這里是動(dòng)態(tài)元素添加的事件'); }
ok,問題解決,繼續(xù)爬坑。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件,在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2013-11-11SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的
json作為一種輕量級(jí)的數(shù)據(jù)交換格式,在前后臺(tái)數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡(jiǎn)單,采用的是鍵值對(duì)表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的,對(duì)spring mvc ajax json相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12刪除select中所有option選項(xiàng)jquery代碼
select中所有option選項(xiàng)如何刪除,本文使用jquery簡(jiǎn)單實(shí)現(xiàn)下,有此需求的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示,能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
jQuery Mobile中的button默認(rèn)提供了很多用于制作移動(dòng)Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05