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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
基于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解析html的实现代码
2011/08/08 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python中取绝对值简单方法总结
2020/07/24 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
销售文员的岗位职责
2013/11/20 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书