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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
简单的js表单验证函数
2013/10/28 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python绘制七段数码管实例代码
2017/12/20 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
六十岁生日答谢词
2014/01/10 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
难忘的一课教学反思
2014/04/30 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python