jQuery為動(dòng)態(tài)生成的select元素添加事件的方法

更新時(shí)間：2016年08月29日 10:03:26 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query為動(dòng)態(tài)生成的select元素添加事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

項(xiàng)目中需要在點(diǎn)擊按鈕時(shí)動(dòng)態(tài)生成select元素，為防止每次點(diǎn)擊按鈕時(shí)從服務(wù)器端獲取數(shù)據(jù)(因?yàn)閿?shù)據(jù)都是相同的),可以這樣寫代碼

1、首先定義全局js變量

var strVoucherGroupSelect ="";

2、在js中寫好獲取服務(wù)端數(shù)據(jù)的代碼

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 需要?jiǎng)討B(tài)增加select的時(shí)候，可以這樣寫

$("#divID").append(genVoucherGroupSelect(rowID) );

5 給select增加點(diǎn)擊事件，在第四步后增加

$("#sl_0" + rowID).bind("change", function(){
   alert("你點(diǎn)擊了下拉框");
})

以上這篇jQuery為動(dòng)態(tài)生成的select元素添加事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery中ajax學(xué)習(xí)筆記4
本節(jié)主要介紹兩點(diǎn)：1.緩存問題 2.中文問題
2011-10-10
jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作示例
這篇文章主要介紹了jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作,結(jié)合實(shí)例形式分析了jQuery結(jié)合css進(jìn)行頁面元素選擇與樣式修改相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
方便實(shí)用的jQuery checkbox復(fù)選框全選功能簡(jiǎn)單實(shí)例
這篇文章介紹了jQuery checkbox復(fù)選框全選功能的代碼實(shí)例，有需要的朋友可以參考一下
2013-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁面元素的動(dòng)態(tài)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
jQuery實(shí)現(xiàn)返回頂部功能
很多網(wǎng)站上都有返回頂部的效果,本文闡述如何使用jquery實(shí)現(xiàn)返回頂部按鈕。希望大家能夠喜歡
2016-02-02
用jquery來定位
這篇文章主要介紹了用jquery來定位
2007-02-02
jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
jquery按回車提交數(shù)據(jù)的代碼示例
jquery按回車提交數(shù)據(jù)的代碼示例，很簡(jiǎn)單的一個(gè)方法，看一下就明白
2013-11-11
基于jquery的jqDnR拖拽溢出的修改
fix bug:溢出之后不能回來的,添加在范圍內(nèi)移動(dòng)，需要的朋友可以參考下。
2011-02-02
jquery 批量上傳圖片實(shí)現(xiàn)代碼
在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長(zhǎng)時(shí)間,找到了一個(gè)不太完整的例子,自已又對(duì)其進(jìn)行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因?yàn)榛鸷碌貌坏奖镜厣蟼鞯膱D片路徑,希望能對(duì)新手有所幫助.
2010-01-01