9.42jquery動態新增元素無法觸發繫結的事件的解決方案
阿新 • • 發佈：2018-12-16
jquery動態新增元素無法觸發繫結的事件的解決方案。
╭(●｀∀´●)╯二狗最近在工作中遇到一個問題，即當用jquery動態新增元素後，發現給動態新增的元素卻無法觸發事件（╯#-_-)╯╧═╧ ( ╯#-_-)╯┴—┴。後來在網上查閱了一些資料，發現原來要這樣處理๑乛◡乛๑：
先上我出錯的程式碼:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!
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">
<
script
src="//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以下才支援，高版本不支援)。
| 1 2 3 |
$(".newBtn").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以
alert('這裡是動態元素新增的事件');
})
|
方法二：利用on（）事件繫結 ($(ParentEle).on("click",".thisEle",function(){})
| 1 2 3 |
$("body").on("click", ".newBtn", function() {
alert('這裡是動態元素新增的事件');
});<
br
>//這裡的ParentEle是 thisEle的父輩元素或者祖先元素，ParentEle可以是document，也可以是body等。<
br
><
br
><
br
>//注意：如果此時呼叫的函式是外部定義好的函式，那在呼叫的時候不要加（），不然會跳過點選事件直接觸發函式
|
$("body").on("click", ".newBtn",aa );
function aa(){
alert('這裡是動態元素新增的事件');
}
٩(๑´0`๑)۶ ok，問題解決，繼續爬坑。