今天工作中需要在頁面動態生成html代碼,但發現新生成的代碼的click事件失效了(非動態生成的代碼已經綁定了click事件),於是在網上找了很多解決辦法,很多都比較復雜,且使用的jquery都比較老,於是結合網上加上自己的測試,找到了一種解決方法。
我使用的jquery是1.9.11,jquery1.7之后就將live方法廢棄了,新增了on和off方法,我的解決辦法就是使用on方法,首先看代碼：
<div class="h3">
<h3>李健1</h3>
<h3>李健2</h3>
<h3>李健3</h3>
<h3>李健4</h3>
<h3>李健5</h3>
</div>
<div class="div">增加</div>
$(function(){
$(".div").click(function(){
var h = "";
for(var i=0;i<5;i++){
h += "<h3>李健"+i+i+"</h3>";
}
$(".h3").append(h);
});
});
//這里我每點擊增加一次會在<div class="h3">最后增加5行<h3>李健i</h3>,我現在要讓所有的<h3>都綁定click事件(包括動態生成的)
$(".h3").on("click","h3",{foo:"文本:"},function(event){
alert(event.data.foo+this.textContent);
});
是不是很簡單,這里選擇<div class="h3">作為父元素調用on方法綁定click事件,這樣父元素下的所有元素都綁定了click事件,有時候並不需要所有的都綁定,那怎么辦？好辦,只需在"click"后增加選擇器(也就是你想選定的子元素),{foo:"文本:"}:表示傳給event.data的數據(參數),在處理函數中我們可以調用event.data.foo讀取到傳入的函數值。打開瀏覽器調試工具你還可以獲取<h3>中的文本,我這里是this.textContent,大家可以根據實際情況發揮。
總之,記住如果你要綁定動態生成的元素事件，一定要先找到他的父元素(父元素不能是動態生成的,否則繼續往上找),在父元素中綁定，然后再進行過濾就ok了,對了，我測試了hover事件發現不行,沒去深究原因。
一、問題描述
用jQuery的append()方法動態添加了一段html代碼之后，發現在為新添加的元素綁定click事件時無法獲取該新元素。
二、解決方法
度娘推薦的方法基本是用live()方法
live()的官方定義和用法:
live() 方法為被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。通過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及未來的元素（比如由腳本創建的新元素）。
live()的詳細使用方法可以查看jQuery live()
live()和bind()的區別就是live不僅可以給頁面中現有的元素綁定事件，還可以給將來動態添加進來的元素綁定時間。
於是我用live()替換了bind(),但報出了新錯誤：TypeError: $(...).live is not a function
經過查詢以后發現，原來是jQuery 1.9及其以上已經無法使用live（），可以用on()方法代替live().
on()的官方定義和用法:
on() 方法在被選元素及子元素上添加一個或多個事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
注意：使用 on() 方法添加的事件處理程序適用於當前及未來的元素（比如由腳本創建的新元素）。
on()的詳細使用方法可以查看jQuery on()
三、代碼演示
html頁面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title>jQuery on()方法測試</title>
</head>
<body>
<button id=
"click1"
>Click me!</button>
<p>Hello,</p>
<script src=
"js/jquery.min.js"
></script>
<script src=
"js/test.js"
></script>
</body>
</html>
|
test.js：
|
1
2
3
4
5
6
7
8
9
|
$().ready(
function
(){
$(
"#click1"
).bind(
"click"
,
function
(){
$(
"p"
).append(
"<div class='new'><b>I'm clicked!</b></div>"
);
});
//on方法要先找到原選擇器（p),再找到動態添加的選擇器（.new)
$(
"p"
).on(
"click"
,
".new"
,
function
(){
$(
this
).remove();
});
});
|
test.js中第6行實現了為動態添加的.new元素綁定click事件。應注意的是，雖然是為.new綁定事件，但on()方法卻是綁定在原選擇器<p>上的，然后將.new放在了參數列表中，原理參照上文on()的官方定義和用法。