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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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实现AES256加密算法实例
2014/09/22 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
使用正则替换变量
2007/05/05 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
使用Python的内建模块collections的教程
2015/04/28 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
保密工作实施方案
2014/02/24 职场文书
设计大赛策划方案
2014/06/13 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers