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-03
jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2013-11-11
extend是常用的參數(shù)處理函數(shù)，特別是對(duì)默認(rèn)值的使用，但是在使用過程中，默認(rèn)值往往是不能被改變的,需要的朋友可以參考下2014-08-08
這篇文章介紹了jQuery遍歷節(jié)點(diǎn)元素的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
SpringMVC框架下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
jQuery 的 tagit 插件效果還是不錯(cuò)的，今天用到該插件，下面給大家詳細(xì)講解下此插件的具體用法。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
刪除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-08
jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
jQuery Mobile中的button默認(rèn)提供了很多用于制作移動(dòng)Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05
圖片的切換時(shí)一個(gè)常用的功能。下面實(shí)現(xiàn)的是一個(gè)點(diǎn)擊數(shù)字來進(jìn)行圖片的切換。學(xué)習(xí)jquery的朋友可以參考下原理。2011-02-02