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);
});

　　

转载于:https://www.cnblogs.com/aredleave/p/7604440.html