jQuery为动态生成的select元素添加事件的方法


Posted in Javascript onAugust 29, 2016

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码

1、首先定义全局js变量

var strVoucherGroupSelect ="";

2、在js中写好获取服务端数据的代码

function genVoucherGroupSelect(rowID){
  return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).parent().html();  //返回增加ID后的下拉框完整html
}
function getVoucherGroupData(){
  $.ajax({
    type: "Post",
    url: "/BillWeb/OrgVoucher/GetVoucherGroup",
    dataType: "json",
    data: "",
    cache: true,
    success: function(res) {
        var str = $("<select></select>");
        var option = "";
        for(var j =0;j < res.length; j++)
        {
          option += "<option value=\"" + res[j].Value + "\">" + res[j].Text + "</option>";
        }
        strVoucherGroupSelect = $(str).html(option).parent().html();
    }
  });
}

3 在页面中编写初始化代码

$().ready(function(){
    getVoucherGroupData();
  });

4 需要动态增加select的时候,可以这样写

$("#divID").append(genVoucherGroupSelect(rowID) );

5 给select增加点击事件,在第四步后增加

$("#sl_0" + rowID).bind("change", function(){
   alert("你点击了下拉框");
})

以上这篇jQuery为动态生成的select元素添加事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
十分钟带你快速了解React16新特性
Nov 10 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 #Javascript
ionic隐藏tabs的方法
Aug 29 #Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
关于Javascript回调函数的一个妙用
Aug 29 #Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
You might like
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php自定文件保存session的方法
2014/12/10 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python远程登录代码
2008/04/29 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
浅谈Python 递归算法指归
2019/08/22 Python
python实现控制台输出彩色字体
2020/04/05 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
赔偿协议书范本
2014/04/15 职场文书
小班下学期评语
2014/05/04 职场文书
党员剖析材料范文
2014/09/30 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript