jQuery中on方法的兩種用法，第二個參數為選擇器，一般會省略

　　用了這么久的jQuery，今天讀源碼時發現$('...').on可以接受三個參數，以前對這些細節都沒注意！

　　下面兩端jQuery代碼：它們實現的功能都是一樣，即是當點擊$('#table td')的時候，在td中動態添加一個input文本框代替原有的值，將td原來的值放到input中的；

 

第一段代碼：在$('#table td')的click事件函數中，添加input的click事件，這里需注意兩點：

　　1、因為事件冒泡，input出現后就不能編輯，需要加上 e.stopPropagation();阻止冒泡；

　　2、新生成的$('#table td input')得點擊事件的綁定，on方法只有兩個參數，這是常用的；

$('#table td').click(function (e) {
        e.stopPropagation();
        var oldVal=$(this).text();
        var newVal='<input value="'+oldVal+'"/>';
        $(this).html(newVal);
});

$('#table td input').on('click', function (e) {
        e.stopPropagation();
        console.log(this);
});

 第二段代碼：效果和第一段代碼完全一樣，只是on的用法有點小變化

　　1、關鍵點：$('#table td').on('click','input', function (e) {...});

　　2、此時on方法有三個參數，第二個參數 'input' 為選擇器，指的是$('#table td')的子元素，

$('#table td').click(function (e) {
        e.stopPropagation();
        var oldVal=$(this).text();
        var newVal='<input value="'+oldVal+'"/>';
        $(this).html(newVal);
});

$('#table td').on('click','input', function (e) {
        e.stopPropagation();
        console.log(this);
});