事件处理(事件委托)

事件处理(事件委托)
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件;

[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件;如:

//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个
//li:$('ul').append('<li>js new li<li>');这个新加的li是不会被绑上click事件的

//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)

总结:

  $('要绑定标签的上级标签').on('click','要绑定的标签',function())  

  #jquery 1版本要使用下面的方式

  $('要绑定标签的上级标签').delegate('要绑定的标签''click',function())  

原文地址:https://www.cnblogs.com/ajaxa/p/9364534.html