jquery 新建的元素事件綁定問(wèn)題

CevenCheng 2012-05-24

展開(kāi)全文

jquery 新建的元素事件綁定問(wèn)題

上一篇 / 下一篇 2008-10-20 21:40:00 / 個(gè)人分類(lèi)：jQuery

查看( 3083 ) / 評(píng)論( 10 ) / 評(píng)分( 40 / 5 )

demo:http://www./demo/jquery頁(yè)面加載完成后元素綁定事件.html

我想很多人都會(huì)向我一樣曾經(jīng) 被新元素的事件綁定困惑很久也就是
在頁(yè)面加載完成后給元素綁定了事件，但又新增加的元素上卻沒(méi)有綁定任何事件。

js的事件監(jiān)聽(tīng)跟css不一樣，css只要設(shè)定好了樣式，不論是原來(lái)就有的還是新添加的，都有一樣的表現(xiàn)。而事件監(jiān)聽(tīng)不是，你必須給每一個(gè)元素單獨(dú)綁定事件。

常見(jiàn)的例子是處理表格的時(shí)候。每行行末有個(gè)刪除按鈕，點(diǎn)了這個(gè)能夠刪除這一行。

通常，我會(huì)這么綁定

jQuery(function($){
//已有刪除按鈕初始化綁定刪除事件
$(".del").click(function() {
$(this).parents("tr").remove();
});
});

對(duì)于在domready之前就存在的刪除按鈕，一切都很完美。但如果在domready之后用js動(dòng)態(tài)添加幾行，那新增的幾行中的這些按鈕都將失去任何作用。

如何解決這個(gè)問(wèn)題？以下提供4種解決方案：
=============================
0號(hào)解決方案——onclick法
如果不顧結(jié)構(gòu)與行為分離的準(zhǔn)則的話，通常，我會(huì)這么做。
注意，此時(shí)的deltr這個(gè)function必須是全局函數(shù)，得放jQuery(function($) {})外面，放里邊就成局部函數(shù)了，html里的onclick就調(diào)用不到了！

<td><buttononclick="deltr(this)">刪除</button></td>

jQuery(function($){
//添加行
$("#add2").click(function(){
$("#table2>tbody").append('<tr><td>新增行</td><td><button nclick="deltr(this)">刪除</button></td></tr>')
});
});
//刪除行的函數(shù)，必須要放domready函數(shù)外面
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};

=============================
1號(hào)解決方案——重復(fù)綁定法
即，在domready的時(shí)候就給已有的元素綁定事件處理函數(shù)，
而后當(dāng)新增加的元素的時(shí)候再次綁定。

<td><buttonclass="del">刪除</button></td>

jQuery(function($){
//定義刪除按鈕事件綁定
//寫(xiě)里邊，防止污染全局命名空間
function deltr(){
$(this).parents("tr").remove();
};
//已有刪除按鈕初始化綁定刪除事件
$("#table3 .del").click(deltr);
//添加行
$("#add3").click(function(){
$('<tr><td>新增行</td><td><button class="del">刪除</button></td></tr>')
//在這里給刪除按鈕再次綁定事件。
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody"));
});
});

=============================
2號(hào)解決方案——事件冒泡法
利用事件冒泡的原理，我們給這個(gè)按鈕的祖先元素綁定事件處理函數(shù)。
然后通過(guò)event.target這個(gè)對(duì)象來(lái)判斷，這個(gè)事件是不是我們要找的對(duì)象觸發(fā)的。
通?？梢岳靡恍〥OM屬性，比如event.target.className、event.target.tagName等之類(lèi)的來(lái)判斷。

<td><buttonclass="del">刪除</button></td>

jQuery(function($){
//第四個(gè)表格的刪除按鈕事件綁定
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e.target).parents("tr").remove();
};
});
//第四個(gè)表格的添加按鈕事件綁定
$("#add4").click(function(){
$("#table4>tbody").append('<tr><td>新增行</td><td><button class="del">刪除</button></td></tr>')
});
});

========================= 下 ===================

demo:http://www./demo/jquery頁(yè)面加載完成后元素綁定事件.html
2號(hào)解決方案——事件冒泡法
利用事件冒泡的原理，我們給這個(gè)按鈕的祖先元素綁定事件處理函數(shù)。
然后通過(guò)event.target這個(gè)對(duì)象來(lái)判斷，這個(gè)事件是不是我們要找的對(duì)象觸發(fā)的。
通?？梢岳靡恍〥OM屬性，比如event.target.className、event.target.tagName等之類(lèi)的來(lái)判斷。

<td><buttonclass="del">刪除</button></td>

jQuery(function($){
//第四個(gè)表格的刪除按鈕事件綁定
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e.target).parents("tr").remove();
};
});
//第四個(gè)表格的添加按鈕事件綁定
$("#add4").click(function(){
$("#table4>tbody").append('<tr><td>新增行</td><td><button class="del">刪除</button></td></tr>')
});
});

=============================
3號(hào)解決方案——復(fù)制事件法
上面幾種方案可以說(shuō)即便你沒(méi)有用到j(luò)Query庫(kù)，你也能相對(duì)比較容易的實(shí)現(xiàn)。但這種方案相對(duì)依賴jQuery的程度更高。而且必須要求jQuery 1.2版以上。低版本jQuery需要插件。
上面兩個(gè)方案都是對(duì)刪除函數(shù)動(dòng)了很多腦筋，換了多種觸發(fā)、綁定的方式。這個(gè)方案不同，可以與平時(shí)純靜態(tài)的元素一樣在domready的時(shí)候綁定。但在我們添加新行的時(shí)候我們改動(dòng)一下，不再想上面那樣拼接字符串來(lái)添加新行了。這回我們嘗試使用復(fù)制DOM元素的方式。并且復(fù)制的時(shí)候連同綁定的事件一起復(fù)制，復(fù)制完之后再用find之類(lèi)的修改內(nèi)部的元素。
同時(shí)，就像這個(gè)例子，如果你會(huì)把所有元素都刪除光，那template這個(gè)模板是必須的，如果不會(huì)刪光，那就未必需要用template了。為了防止被誤刪，此處我把template設(shè)了隱藏。
我使用了jQuery中特有的clone(true)

.template{display:none;}

<trclass="template">
<td>這里是模板</td>
<td><button class="del">刪除</button></td>
</tr>
<tr>
<td>這行原來(lái)就有</td>
<td><button class="del">刪除</button></td>
</tr>
<tr>
<td>這行原來(lái)就有</td>
<td><button class="del">刪除</button></td>
</tr>

jQuery(function($){
//第五個(gè)表格的刪除按鈕事件綁定
$("#table5 .del").click(function() {
$(this).parents("tr").remove();
});
//第五個(gè)表格的添加按鈕事件綁定
$("#add5").click(function(){
$("#table5>tbody>tr:eq(0)")
//連同事件一起復(fù)制
.clone(true)
//去除模板標(biāo)記
.removeClass("template")
//修改內(nèi)部元素
.find("td:eq(0)")
.text("新增行")
.end()
//插入表格
.appendTo($("#table5>tbody"))
});
});

=============================
總評(píng)：
上面4種方案，各有優(yōu)劣。
0號(hào)方案，結(jié)構(gòu)與行為完全沒(méi)有分離，而且污染全局命名空間。最不推薦。所以我都不把它當(dāng)作一個(gè)方案來(lái)看。但對(duì)于js初學(xué)者，可以用來(lái)項(xiàng)目救急。
1號(hào)方案，中規(guī)中矩，沒(méi)啥好也沒(méi)啥不好
2號(hào)方案，這種方法充分的發(fā)揮了js事件冒泡的優(yōu)勢(shì)。而且效率最高。但同時(shí)由于這種方案無(wú)視了jQuery強(qiáng)大的選擇器，所以如果涉及的元素屬性要求過(guò)多就會(huì)比較麻煩了。你會(huì)徘徊在眾多if的條件的是非關(guān)系之中。后來(lái)我想起來(lái)，可以用jQuery中的$(event.target).is(selector)來(lái)作為條件。這樣可以極大提升開(kāi)發(fā)效率，但略微降低執(zhí)行效率。
3號(hào)方案，這是我認(rèn)為最能體現(xiàn)結(jié)構(gòu)與行為分離的思想的一種方案。但缺點(diǎn)也很明顯，對(duì)于jQuery依賴性過(guò)于高了，要不就自己寫(xiě)一個(gè)復(fù)制連同事件一起復(fù)制的函數(shù)，但這也顯然對(duì)于初學(xué)者來(lái)說(shuō)異常困難。但從未來(lái)的趨勢(shì)的角度來(lái)看，還是很推薦使用這種方案的。

具體選用哪一個(gè)方案，沒(méi)有定數(shù)。具體看你的項(xiàng)目以及你js還有結(jié)構(gòu)與行為分離的思想的掌握程度。最適合的才是最好的。

=============================
附加：
把3號(hào)方案改造成完美的結(jié)構(gòu)行為分離的樣式。
首先，帶有template的是模板元素。他是一切復(fù)制的源泉，為了防止被誤刪，所以設(shè)為不可見(jiàn)。如果不會(huì)刪除光，那么這個(gè)模板元素也是可選的。因?yàn)槟憧梢詮?fù)制任何一個(gè)已經(jīng)存在的用于循環(huán)元素。
其次，給每個(gè)重復(fù)的元素加上一個(gè)repeat，方便用于刪除按鈕找到這一級(jí)元素。這個(gè)是可選的，有時(shí)候并不需要。
最后是給每一個(gè)要修改的元素加上一個(gè)類(lèi)，便于用find找到。比如我這里就家了content類(lèi)，新增加的可以修改里邊的值。
這樣一個(gè)完美的結(jié)構(gòu)與行為分離的案例就完成了。

<tableid="table6">
<tbody id="tbody6">
<tr class="template repeat">
<td class="content">這里是模板</td>
<td><button class="del">刪除</button></td>
</tr>
<tr class="repeat">
<td class="content">這行原來(lái)就有</td>
<td><button class="del">刪除</button></td>
</tr>
<tr class="repeat">
<td class="content">這行原來(lái)就有</td>
<td><button class="del">刪除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td><button id="add6">添加</button></td>
</tr>
</tfoot>
</table>

jQuery(function($){
//第六個(gè)表格的刪除按鈕事件綁定
$("#tbody6 .del").click(function() {
$(this).parents(".repeat").remove();
});
//第六個(gè)表格的添加按鈕事件綁定
$("#add6").click(function(){
$("#tbody6>.template")
//連同事件一起復(fù)制
.clone(true)
//去除模板標(biāo)記
.removeClass("template")
//修改內(nèi)部元素
.find(".content")
.text("新增行")
.end()
//插入表格
.appendTo($("#tbody6"))
});
});

同樣，這段js也適用于如下的html結(jié)構(gòu)

<ulid="tbody6">
<li class="template repeat">
<span class="content">這里是模板</span>
<span><button class="del">刪除</button></span>
</li>
<li class="repeat">
<span class="content">這行原來(lái)就有</span>
<span><button class="del">刪除</button></span>
</li>
<li class="repeat">
<span class="content">這行原來(lái)就有</span>
<span><button class="del">刪除</button></span>
</li>
</ul>

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

jquery 新建的元素事件綁定問(wèn)題

jquery 新建的元素事件綁定問(wèn)題

相關(guān)閱讀: