jQuery on()方法綁定動態元素的點擊事件無效

以前就一直受這個問題的困擾，在jQuery1.7版本以後添加了on方法，以前就瞭解過，其優越性高於live(),bind(),delegate()等方法，在此以前項目中想用這個來測試結果發現，竟然動態生成的標籤點擊了沒反應，而live方法卻可以支持，因而乎處處查資料，問網友，結果找了很久在一篇文章中終於找到了答案。。。

 

jQuery 使用on綁定動態生成的元素時，不能直接用該對象操做，而是選擇其非動態生成的父節點而後再找到自己才能達到效果。你們看看源碼就知道了。生成的按鈕基數項on方法點擊無效live方法有效。

好比頁面上有下邊兩個元素：

<input type="button" name="addbtn" value="按鈕添加" />
<div id="test"></div>

使用下邊的jQuery代碼你們能夠對比看看區別：

$(function () {
    var a = 1,
    $_div = $('#test');
    $('input[name=addbtn]').on('click', function () {
        $_div.append('<input type="button" name="test' + a + '" value="按鈕' + a + '"/>');
        a++;
    });

    //偶數項點擊事件
    $_div.on('click', 'input[name^=test]:even', function () {   
        alert('我是有效的on方法,你能看見我嗎：' + this.value);
    });

    //奇數項綁定的點擊事件  發現點擊無效，而是用live方法卻可以支持
    $('input[name^=test]:odd').on('click', function () {   
        alert('我是無效的on方法,你不能看見我');
    });

    //奇數項綁定的點擊事件  發現點擊無效，而是用live方法卻可以支持
    $('input[name^=test]:odd').live('click', function () {
        alert('我是live方法,你能看見我嗎：' + this.value);
    });
});

代碼簡單，就不演示了。