摘要：它是一個(gè)過(guò)濾器的作用，只有被選中元素的后代元素才會(huì)觸發(fā)事件。替換是引入的，目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題，某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制

在開(kāi)發(fā)項(xiàng)目的時(shí)候，JQuery的使用極其廣泛，如果腦海中沒(méi)有一點(diǎn)JQuery的基礎(chǔ)知識(shí)，隨性編寫(xiě)，那么就有可能造成bug問(wèn)題。JQuery 1.4版本之后新增了on方法，這個(gè)用得比較多，為此我特地做了個(gè)總結(jié)，有需要的伙伴們可以好好的看一下這篇文章。on方法是專(zhuān)門(mén)用來(lái)處理事件委派機(jī)制的，籠統(tǒng)的說(shuō)就是解決在你Ajax或者Pjax之后事件無(wú)法綁定到新添加的元素上的問(wèn)題的，很多JQuery中的bug問(wèn)題也都出現(xiàn)在這。

1、解決Ajax或者Pjax之后導(dǎo)致點(diǎn)擊事件失效問(wèn)題。

1、當(dāng)初次點(diǎn)擊checkbox時(shí)批量刪除按鈕可以正常顯示出來(lái)，但是在Ajax或者Pjax之后就沒(méi)法顯示了。
1.1、顯示

1.2、不顯示

1、直接input[name="selection[]"]點(diǎn)click綁定點(diǎn)擊事件。
此時(shí)，初次點(diǎn)擊checkbox時(shí)批量刪除按鈕可以正常顯示出來(lái)，但是在Ajax或者Pjax之后就沒(méi)法顯示了。

/**
 * 批量刪除 隱藏顯示按鈕
**/
    $("input[name="selection[]"]").click(function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeOut();
    }else{
        $("#remove-all").fadeIn();
    }
 });
    $("input[name="selection_all"]").click(function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeIn();
    }else{
        $("#remove-all").fadeOut();
    }
 });

 function has_selected(){
    var keys= new Array();
    var keys_str = "";
    $("input[name="selection[]"]:checked").each(function(){
         keys.push($(this).val());
    });
    keys_str = keys.join(",");
    return keys_str;
 }

1、使用on()通過(guò)將事件綁定到document。（其實(shí)這里也可以將document換成body或者其他Ajax或者Pjax之后輸出頁(yè)面之外的元素都行，document只是標(biāo)準(zhǔn)而已）
問(wèn)題解決，在Ajax或者Pjax之后，點(diǎn)擊checkbox批量刪除按鈕還能正常顯示出來(lái)。

/**
 * 批量刪除 隱藏顯示按鈕
**/
$(document).on("click", "input[name="selection[]"]", function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeOut();
    }else{
        $("#remove-all").fadeIn();
    }
 });
$(document).on("click", "input[name="selection_all"]", function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeIn();
    }else{
        $("#remove-all").fadeOut();
    }
 });

 function has_selected(){
    var keys= new Array();
    var keys_str = "";
    $("input[name="selection[]"]:checked").each(function(){
         keys.push($(this).val());
    });
    keys_str = keys.join(",");
    return keys_str;
 }

jQuery從1.7開(kāi)始，引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定。因?yàn)樵诖酥坝衎ind(), live(), delegate()等方法來(lái)處理事件綁定，jQuery從性能優(yōu)化以及方式統(tǒng)一方面考慮決定推出新的函數(shù)來(lái)統(tǒng)一事件綁定方法并且替換掉以前的方法。

on(events,[selector],[data],fn)
events:一個(gè)或多個(gè)用空格分隔的事件類(lèi)型和可選的命名空間，如"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)寫(xiě)，返回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()也可以做類(lèi)似的事情了。live()的原理很簡(jiǎn)單，它是通過(guò)document進(jìn)行事件委派的，因此我們也可以使用on()通過(guò)將事件綁定到document來(lái)達(dá)到live()一樣的效果。

live()寫(xiě)法
$("#list li").live("click", "#list li", function() {
//function code here.
});

on()寫(xiě)法
$(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)代理的寫(xiě)法和delegate()基本一致。
delegate()的寫(xiě)法
$("#list").delegate("li", "click", function() {
//function code here.
});

on()寫(xiě)法
$("#list").on("click", "li", function() {
//function code here.
});

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

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

深入理解jquery新的綁定事件機(jī)制on方法的使用
jQuery新的事件綁定機(jī)制on()