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

最新推荐文章于 2021-06-16 16:34:32 发布

weixin_30384217

最新推荐文章于 2021-06-16 16:34:32 发布

阅读量371

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6361515.html

版权

项目中需要在点击按钮时动态生成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( 
    "你点击了下拉框" 
    ); 
   
    })