用了这么久的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); });