jQuery动态绑定
2016-01-27 18:00
507 查看
一、原始需求
在实际项目的时候,遇到了一个问题,就是通过JS动态生成的元素,无法触发JS事件。原始的JS代码:
$(function () { $(".original").click(function () { alert("123"); }); })
上述类型的JS代码在处理随着页面加载而加载的DOM元素是没有问题的。但是在处理页面加载完成后,通过动态添加的方式添加上的元素是无效的,需要另外利用Jquery绑定。
动态添加元素的JS代码:
$(function () { $(".run").click(function () { var btn = "<button class='original'>我是新来的的</button>"; $(".out").append(btn); }); })
此时如果点击 新添加的按钮,通过上述声明式无法处理响应事件的。
PS:至于原因是什么,这个我也不太清楚。
二、jQuery的on方法
通过查阅相关说明,发现jQuery的on()方法是支持在动态添加的元素上绑定事件的,使用见:官网说明(英文):官方API解释
中文说明(中文):中文API解释(推荐)
详细说明请参考上述网站,这里只提出几个重点来讲解:
使用格式:jQueryObject.on( events [, selector ] [, data ], handler )---[此为可选项]
解释:events为单个或多个事件,handler为触发事件要执行的动作。
对于selector而言,如果为null或不写那么是绑定jQueryObject匹配到的元素;如果不为null,则表明绑定的是jQuyerObject的后台元素中所有符合selector要求的元素。
三、处理方法
<script type="text/javascript"> $(function () { // 方法1 $(document).on("click", ".original", function () { alert("HHHH"); }); //无效? $(".original").on("click", function () { alert("HHHH"); }); }) </script>
方法1肯定有效,但是很奇怪方法2无效。。。
四、补充
思考好了再补充,留待此次。。。相关文章推荐
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jquery中的过滤操作详细解析
- jquery中remove()与detach()的区别
- jquery.validate remote 和 自定义验证方法
- .net中JS、Jquery前后台互动总结
- JQuery插件datatables相关api
- jquery easyui动态校验,easyui动态验证
- jQuery.validator 自定义验证
- JQuery方法扩展
- 简易jQuery对话框组件、弹窗插件
- jQuery修改操作css属性实现方法
- jQuery 实现模块的复制和删除
- jQuery+css实现的时钟效果(兼容各浏览器)
- jQuery将字符串转换成json
- jQuery实现的分子运动小球碰撞效果
- jQuery实现放大镜效果
- jQuery $.each用法
- jQuery自动加载更多程序
- jQuery实现在线文档
- jQuery+css3实现转动的正方形效果(附demo源码下载)