依扬博客 Blog For Business and IT Technology
41312634's Blog, thoughts, activities, news, studies, travels, movies, cates and so on included.
首页   留言簿  订阅更新  投稿专区 
JQuery动态生成的元素无法绑定事件
分类: JavaScript    2014-12-10 18:41:57    浏览 359    评论 0   

  近日项目需要用到JQuery,确实轻便、强大,大大方便了开发工作,降低开发难度,缩短开发时间,不过最近遇到一个棘手问题。

  具体表现是,用JQuery响应某些事件来动态生成html元素,例如为一个按钮点击事件动态插入一个div元素。生成后,该元素却无法响应已经任何事件,on、live、click、delegate、trigger、one各种方法全部试过,均告无效,实在抓头。

  最后还是百度两个小时后,在一篇文章中找到了解决方法。文章链接:http://www.jquery001.com/jquery-on.html。该问题的原因是在js中所定义的方法是对页面已经存在的元素有效,而动态生成的元素在其生成时,方法已经执行生效过了,它成了落单的可怜虫,没有方法来处理它,所以它就无法响应任何方法。解决问题是,使用on绑定动态生成的元素,但不能直接对该元素操作,而是操作它的非动态生成的父节点,这样才有效果,例如动态生成的元素的css类名为item,其父节点是固定存在的,id为tableMember或者class为myTable,对于这种要为动态生成的元素绑定事件的情况,on方法要提供三个参数,而且顺序也不要搞混哦,代码类似以下就能达到效果了:$('.myTable').on('click','.item',function(){ });或者$('#tableMember').on('click','.item',function(){ });

  如果是已经存在的元素,其on方法则不是上面的形式,而是只用两个参数,形式类似这样:$(元素).on(事件类型,function(){ });

  这次问题如果不是靠百度结果,可能会一直找不到办法。JQuery官方的文档也没有详细说明on方法对这种情况如何处理。感谢广大的网友,问题得以解决!

上一篇:javascript判断对象是否为空
下一篇:Bootstrap学习有感

相关文章
[2008-05-26 23:54:40]  JavaScript计算md5的函数 (610/0)
[2008-05-26 23:56:29]  JavaScript控制元素显示还是隐藏的函数 (574/0)
[2008-05-26 23:58:15]  初始化Ajax对象的操作 (538/0)
[2008-05-27 00:00:44]  Ajax的一般使用方法 (521/0)
[2008-05-30 01:42:39]  JavaScript获取域名 (593/0)
[2008-05-30 01:46:40]  JavaScript元素切换图片 (525/0)
[2008-05-30 02:21:58]  JavaScript字符串替换函数 (535/0)
[2008-06-01 01:25:25]  JavaScript判断是否安装有Alexa工具条 (588/0)
[2008-07-03 14:52:54]  JavaScript让页脚保持在底部 (538/0)
[2008-07-03 17:37:01]  JavaScript获取当前滚动位置 (571/0)

本文评论列表 (0)

发表评论
姓名(*)
链接地址
Email
验证码(*) 更换验证码
评论(*) (管理员审核后公开显示)