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 Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue组件化中slot的基本使用方法
May 01 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
多重?l件?合查?(一)
2006/10/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python九九乘法表的实例
2017/09/26 Python
Python绘制3D图形
2018/05/03 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
python中format函数如何使用
2020/06/22 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
小学三年级学生评语
2014/04/22 职场文书
寒山寺导游词
2015/02/03 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书