jQuery 1.7以后 jQuery2 新元素绑定事件on替代live
最近做了一个类别动态加载的功能,jQuery版本用的是2.02。

绑定事件jQuery1.7之前用的是live或者是bind。新版的jQuery新增了on方法
由于子类别是动态加载的,默认是不会有事件加载的,要给他绑定一个change事件才能获取他的子类别。
然后定义一个handler,给on方法里面传值,上代码
//定义一个类别改变的事件hander
function classChangeHander() {
var thisinput = $(this);
thisinput.parent().nextAll().remove();
if (thisinput.val().trim() == "") {
return;
}
$.get("{:U('Admin/Item/getChildClass')}", {'class_id': thisinput.val()}, function (data) {
if (data.length) {
var optionStr = '<option value=""> </option>';
data.forEach(function (item) {
optionStr += '<option value="' + item.class_id + '">' + item.class_name + '</option>';
});
var thisDepth = thisinput.data('depth') + 1;
thisinput.parent().after("<div class='col-sm-2'><select class='form-control' id='class_" + thisDepth + "' name='class_id' data-depth='" + thisDepth + "'>" + optionStr + "</select></div>");
var newId = 'class_' + thisDepth;
$("select[id^=" + newId + "]").on("change", classChangeHander);//绑定子类别的事件
}
}, 'json');
}
//class
$("select[id^='class_']").on("change", classChangeHander);//默认加载的时候绑定父类别下拉框的事件
jQuery 1.7以后 jQuery2 新元素绑定事件on替代live的更多相关文章
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jQuery delegate方法实现Ajax请求绑定事件不丢失
给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- 解决jquery新加入的元素没有绑定事件问题
在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果 ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- Jquery 页面元素动态添加后绑定事件丢失方法,非 live
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...
- jQuery中对未来的元素绑定事件
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
随机推荐
- MongoDB(四)——管理架构
前面介绍MongoDB基础,在这里,我们推荐两个网站,我们可以看看,评论是相当具体:http://www.w3cschool.cc/mongodb/mongodb-tutorial.html.http ...
- Java,javascript,html,css的关系
内容:,就是制作者放在页面想让访问者浏览的内容 . 主要由java语言提供数据检索.更新.业务处理等. 结构:使内容更加具有逻辑性和易用性,类似于1,2级标题,正文.列表等等. HTML 表现:用于修 ...
- js jquery 等的地址
jquery在线地址(jquery地址):http://code.jquery.com/jquery-latest.js js人脉图(关系图)插件: http://js.cytoscape.org/
- Introducing the Blog Module
Introducing the Blog Module Now that we know about the basics of the zend-mvc skeleton application, ...
- Android4.4 + WebAPI 实现拍照上传
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...
- Spring任务调度
任务调度是大多数应用系统的常见需求之一,拿论坛来说:每个半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积分排名,每隔30分钟执行对锁定过期的用户进行解锁.以上都是以时间为关注点的调度,事实上 ...
- 【转】Android LruCache源码介绍
本文来源:转载自: http://blog.csdn.net/linghu_java/article/details/8574102 package android.util; import java ...
- 我的开发框架(WinForm)4
日志模块 对于一个系统来说,日志模块是必不可少的,它能给后面系统的维护和bug的修复,带来极大的方便..net的日志模块有很多,比较流行的有Log4Net,NLog,还有微软企业库的日志模块,我采用的 ...
- 一致性Hash算法及使用场景
一.问题产生背景 在使用分布式对数据进行存储时,经常会碰到需要新增节点来满足业务快速增长的需求.然而在新增节点时,如果处理不善会导致所有的数据重新分片,这对于某些系统来说可能是灾难性的. 那 ...
- 设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选
设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...