最近做了一个类别动态加载的功能,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="">&nbsp;</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的更多相关文章

  1. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  2. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  3. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. 解决jquery新加入的元素没有绑定事件问题

    在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果 ...

  6. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  7. Jquery 页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...

  8. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  9. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

随机推荐

  1. 【转】安装Ubuntu 15.10后要做的事

    Ubuntu 15.10发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...

  2. windows MySQL 5+ 服务手动安装

    一.手动安装mysql 1.准备一个mysql免安装版本(把原来安装好的版本复制一份即可.一次安装多次使用^_^),将mysql复制到指定目录. 2.配置my.ini文件(本例使用的是5.0.22版本 ...

  3. Regular Expressions --正则表达式官方教程

    http://docs.oracle.com/javase/tutorial/essential/regex/index.html This lesson explains how to use th ...

  4. CreateToolhelp32Snapshot

    CreateToolhelp32Snapshot CreateToolhelp32Snapshot函数为指定的进程.进程使用的堆[HEAP].模块[MODULE].线程[THREAD])建立一个快照[ ...

  5. javascript笔记05:函数表达式和函数语句的区别

    1.首先是函数语句: myfunc(); function myfunc() { //执行一些语句 } 当函数语句被定义的时候,在一个脚本代码被优先考虑,因此,无论该函数是定义之前或者定义之后都可以被 ...

  6. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...

  7. DHCP 服务器

    简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要用途:给内部网络或网络服务供应商自动分配 I ...

  8. [转]SQL Server 和Oracle 数据类型对应

    本文转自:http://blog.sina.com.cn/s/blog_681cd80d0100q84t.html SqlServer 2k转换为Oracle 10g 列名 SqlServer数据类型 ...

  9. 将Oracle表导入到Access方法,已经安装了Access但Win7提示 找不到access driver

    已经安装了Access但Win7提示 找不到access driver: 1.打开 "C:\Windows\SysWOW64\odbcad32.exe" 2.管理员cmd运行 命令 ...

  10. Linux源码的目录结构

    Linux用来支持各种体系结构的源代码包含大约4500个C语言程序,存放在270个左右的子目录下,总共大约包含200万行代码,大概占用58MB磁盘空间.  源代码所有在目录:/usr/src/linu ...