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'); // ...
随机推荐
- 【转】安装Ubuntu 15.10后要做的事
Ubuntu 15.10发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...
- windows MySQL 5+ 服务手动安装
一.手动安装mysql 1.准备一个mysql免安装版本(把原来安装好的版本复制一份即可.一次安装多次使用^_^),将mysql复制到指定目录. 2.配置my.ini文件(本例使用的是5.0.22版本 ...
- Regular Expressions --正则表达式官方教程
http://docs.oracle.com/javase/tutorial/essential/regex/index.html This lesson explains how to use th ...
- CreateToolhelp32Snapshot
CreateToolhelp32Snapshot CreateToolhelp32Snapshot函数为指定的进程.进程使用的堆[HEAP].模块[MODULE].线程[THREAD])建立一个快照[ ...
- javascript笔记05:函数表达式和函数语句的区别
1.首先是函数语句: myfunc(); function myfunc() { //执行一些语句 } 当函数语句被定义的时候,在一个脚本代码被优先考虑,因此,无论该函数是定义之前或者定义之后都可以被 ...
- HTML实现跳转到页面指定位置
<a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...
- DHCP 服务器
简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要用途:给内部网络或网络服务供应商自动分配 I ...
- [转]SQL Server 和Oracle 数据类型对应
本文转自:http://blog.sina.com.cn/s/blog_681cd80d0100q84t.html SqlServer 2k转换为Oracle 10g 列名 SqlServer数据类型 ...
- 将Oracle表导入到Access方法,已经安装了Access但Win7提示 找不到access driver
已经安装了Access但Win7提示 找不到access driver: 1.打开 "C:\Windows\SysWOW64\odbcad32.exe" 2.管理员cmd运行 命令 ...
- Linux源码的目录结构
Linux用来支持各种体系结构的源代码包含大约4500个C语言程序,存放在270个左右的子目录下,总共大约包含200万行代码,大概占用58MB磁盘空间. 源代码所有在目录:/usr/src/linu ...