这周我在工作中遇到了一些小问题。 我趁着不加班的机会把它们记录下来。 我的记忆力还不如Mac钥匙。 哈哈,我先背一首诗吧。
问题
页面上的一些元素是由js动态生成的。 将一些干扰绑定到这些元素上jquery 使事件失效,例如点击jquery 使事件失效,将不会生效。 为什么?
解决方案
我先说一下解决办法。
//监听新增DOM元素的点击事件
$('#domId').on('click','.newClass',function(){
//doSomething;
})
//此处的'#domId'必须是你页面初始化时就加载好的dom节点,也就是你html中本来就存在的。
//此处的'.newClass'是你要监听的新增的DOM元素标识。
//注:.newClass需是#domId的子元素。
扩展()
on()技术现在已经很强大了,不仅可以窃听点击,还可以窃听其他干扰。 它还简化了代码,因为您可以利用所选元素的子元素。
句型
$(selector).on(event,childSelector,data,function)
定义和用法
on() 方法向所选元素和子元素添加一个或多个风暴处理程序。
从 jQuery 1.7 版开始,on() 方法是 bind()、live() 和 delegate() 方法的新替代品。 这种方法给API带来了很多便利,我们推荐使用这种方法,它简化了jQuery代码库。
一些笔记
注意:使用 on() 方法添加的 Storm 处理程序适用于当前和未来的元素(例如由脚本创建的新元素)。
提示:要删除风暴处理程序,请使用 off() 方法。
提示:如果您想添加仅运行一次的风暴然后将其删除,请使用 one() 方法。
不只是点击,还有哪些方式可以点击on()呢?
由于文档没有直接说明支持哪些风暴,所以:
以下是我从被否认的峰会中收集到的信息:
blur focus focusin focusout resize scroll click dblclick
mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave
change select submit keydown keypress keyup contextmenu
并且,除此之外,甚至还支持自定义事件,通过trigger方法来触发自定义事件即可。