简述:

在做项目时遇到这样的问题:有些事件是在ready或onload事件以后执行的,其中的一些dom操作,例如,添加class或者添加新的标签和文本内容。这时候在给这些动态获取或者后添加的元素绑定的事件,js并没有获取到这些元素,因此在开发者工具中也不会存在报错。

原因:

平时常用的$().on(‘click’,function(){})的参数设置的不够全,只针对页面已存在的选择器进行了操作。

$().click(function(){})

当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。(对动态创建的元素无效)

$(document).on('click','selector',function(){})

.on()方法包含很多事件,点击,双击等等事件。和$(‘ ‘).click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数

$(document).on()是把事件委托到了document上,而新产生的元素如果符合指定的元素,也能触发此事件。$(‘ ‘).on是把事件委托到了页面现有的元素上面,如果是动态生成的新的元素,是没有事件的。

jquery文档对事件的具体定义:.on( events, [selector], [ data], handler )

events : 一个或多个用空格分隔的事件类型和可选的命名空间,”click”或”keydown.myPlugin” 。

selector : 一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

data : 当一个事件被触发时要传递event.data给事件处理函数。

handler : 该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

jQuery关于此事件的详细表述