jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。使用 on() 方法可以給將來(lái)動(dòng)態(tài)創(chuàng)建的動(dòng)態(tài)元素綁定指定的事件，例如append等。

之前使用 on 的時(shí)候一直是

$("").on('click','function(){ 
}') 

之后發(fā)現(xiàn)有些時(shí)候一直無(wú)法綁定（比如元素動(dòng)態(tài)生成時(shí)），查看文檔后發(fā)現(xiàn)正確用法應(yīng)該是

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

同時(shí)，注意

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

on(events,[selector],[data],fn)

events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。

data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。

fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。

替換bind()

當(dāng)?shù)诙€(gè)參數(shù)'selector'為null時(shí)，on()和bind()其實(shí)在用法上基本上沒(méi)有任何區(qū)別了，所以我們可以認(rèn)為on()只是比bind()多了一個(gè)可選的'selector'參數(shù)，所以on()可以非常方便的換掉bind()

替換live()

在1.4之前相信大家非常喜歡使用live(),因?yàn)樗梢园咽录壎ǖ疆?dāng)前以及以后添加的元素上面，當(dāng)然在1.4之后delegate()也可以做類似的事情了。live()的原理很簡(jiǎn)單，它是通過(guò)document進(jìn)行事件委派的，因此我們也可以使用on()通過(guò)將事件綁定到document來(lái)達(dá)到live()一樣的效果。

live()寫法

代碼如下:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on()寫法

代碼如下:

$(document).on('click', '#list li', function() {
//function code here.
});

這里的關(guān)鍵就是第二個(gè)參數(shù)'selector'在起作用了。它是一個(gè)過(guò)濾器的作用，只有被選中元素的后代元素才會(huì)觸發(fā)事件。

替換delegate()

delegate()是1.4引入的，目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題，某種程度上和live()優(yōu)點(diǎn)相似。只不過(guò)live()是通過(guò)document元素委派，而delegate則可以是任意的祖先節(jié)點(diǎn)。使用on()實(shí)現(xiàn)代理的寫法和delegate()基本一致。

delegate()的寫法

代碼如下:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on()寫法

代碼如下:

$('#list').on('click', 'li', function() {
//function code here.
});

貌似第一個(gè)和第二個(gè)參數(shù)的順序顛倒了一下，別的基本一樣。

總結(jié)

jQuery推出on()的目的有2個(gè)，一是為了統(tǒng)一接口，二是為了提高性能，所以從現(xiàn)在開始用on()替換bind(), live(), delegate吧。尤其是不要再用live()了，因?yàn)樗呀?jīng)處于不推薦使用列表了，隨時(shí)會(huì)被干掉。如果只綁定一次事件，那接著用one()吧，這個(gè)沒(méi)有變化。

jquery on() 方法綁定動(dòng)態(tài)元素

廢話不多說(shuō)了，直接給大家貼代碼了。

<div id="test">
<div class="evt">evt1</div>
</div>

錯(cuò)誤的用法，下面方法只為第一個(gè)class 為 evt 的div 綁定了click事件，使用append動(dòng)態(tài)創(chuàng)建的div則沒(méi)有綁定

<script>
// 先綁定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正確的用法如下：

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

最新評(píng)論