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'); // ...
随机推荐
- SQLServer2005日志传送常见的几个问题
1.STANDBY 只读方式还原数据库:[备份数据库服务器]将完全备份文件复制到备份数据库服务器上,并以STANDBY的方式进行恢复 . SQL语句: RESTORE DATABASE [CNBlog ...
- BZOJ 2241: [SDOI2011]打地鼠 暴力
2241: [SDOI2011]打地鼠 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pro ...
- android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对
http://blog.csdn.net/itfootball/article/details/21777835 http://blog.csdn.net/chenbang110/article/de ...
- offsetTop和scrollTop的差别
近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...
- pip和easy_install使用方式
easy_install 跟 pip 都是 Python 的套件管理程式,有了它們,在使用 Python 開發程式的時候會帶來不少方便. easy_install 和 pip 有什麼不一樣?據 pip ...
- PERCONA-TOOLKIT 工具文档
https://www.percona.com/doc/percona-toolkit/2.2/index.html
- DebuggingWithGdb
https://wiki.python.org/moin/DebuggingWithGdb http://blog.nsfocus.net/python-program-troubleshooting ...
- php 关于session_start()总是提示错误
1.session_start();执行前不能有输出,或者漆面有ob_start();并php.ini配置output_buffering = On; 2.如果是utf8文件的话,要注意前面是否有bo ...
- java 并发官方教程
http://docs.oracle.com/javase/tutorial/essential/concurrency/index.html Concurrency Computer users t ...
- ASP.NET MVC 4 Ajax上传文件
这两天一直纠结着表单的问题.想在一个表单里实现三个功能: 输入查询条件,点击查询: 导出查询数据: 上传文件: 方法有很多,乱花渐欲迷人眼,尝试了很多,无果.大致说的是,给不同按钮写js代码,在js代 ...