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'); // ...
随机推荐
- Genymotion中文手册
目录1.概述 22.特点 22.1最擅长于虚拟Android 22.2高可控性 22.3管理你的设备 22.4从Eclipse中开启虚拟设备 33.要求 33.1操作系统要求 33.2系统硬件要求 3 ...
- Sublime Text 2&3中输入法不跟随光标移动的问题的解决方法
插件名称:IMESupport GitHub页面:https://github.com/chikatoike/IMESupport 安装方法: 手动安装和通过Package Control在线安装. ...
- Codeforces Round #200 (Div. 1) B. Alternating Current 栈
B. Alternating Current Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343 ...
- starling localToGlobal
o.localToGlobal(new Point()); 返回o在舞台的全局坐标... o.parent.localToGlobal(new Point(o.x,o.y)) //返回指定坐标 ...
- 《高级Perl编程》 读书笔记
http://blog.chinaunix.net/uid-20767124-id-1849881.html
- [000]socket通信--server和client实现的简单例子
在C语言中就学过scanf和printf,其实理解socket就跟这两个输入输出差不多,只不过是信息的传输而已. 1.TCP服务器端(server)的默认函数调用顺序: 按照上述的调用顺序,我们可以来 ...
- [010]Try块和异常处理
Throw表达式和try块的定义如下: 1. throw 表达式,错误检测部分使用这种表达式来说明遇到了不可处理的错误.可以说,throw 引发了异常条件. 2. try 块,错误处理部分使用它来处理 ...
- mysql使用心得
SET FOREIGN_KEY_CHECKS=0; -- ------------------------------ Table structure for `staff`-- ---------- ...
- cocos2dx 公告效果
第一种方法: http://blog.csdn.net/jackystudio/article/details/12991977 [玩转cocos2d-x之十六]滚动字幕和公告 第二种方法: http ...
- NekoHTML and Dom4j
http://pro.ctlok.com/2010/07/java-read-html-dom4j-nekohtml.html package com.ctlok.pro; import java.i ...