在select2插件中append下拉选，点击没反应的解决

今天前端大佬帮我解决了一个棘手的问题：克隆了已有系统的网页，尝试把复制下来的html改造成jsp。基本功能正常，然而点击新增按钮，出来的行无法点击下拉选，控制台也没报错。

 

项目用的是jeesite2.0框架，springMVC架构。下拉选默认使用了select2插件，

源代码：

 1 <table id="tblOtherFeeTemplate" style="display: none;">
 2     <tbody>
 3     <tr class="otherFeeDataRow">
 4         <td> td>
 5         <td align="center">
 6             
 7             
 8             
 9             <select name="othfeeId" style="width:120px;">
10     <option value="">-请选择-option>
11     <option value="AW">AW/制单费option>
12     <option value="CG">CG/港口费option>
13     <option value="LA">LA/活动物操作费option>
14     <option value="MA">MA/归属代理人杂费option>
15     <option value="MO">MO/杂费option>
16     <option value="MY">MY/燃油费option>
17     <option value="RA">RA/危险品操作费option>
18     <option value="SC">SC/安全附加费option>
19     <option value="SD">SD/地面运费option>
20     <option value="TX">TX/税option>
21     <option value="VC">VC/声明价值附加费option>
22 
23 
24 select>
25 
26 
27             
28         td>
29         <td align="center">
30             <input type="text" name="othfeeOwner" maxlength="1" value="C" readonly="readonly" tabindex="-1" class="inputText ime-off" style="width: 30px;background-color:#DDDDDD;text-align:center;"/>
31         td>
32         <td align="center">
33             <input type="text" name="othfeeRate" maxlength="8" value="" class="inputText ime-off" style="width: 50px;"/>
34         td>
35         <td align="center">
36             <input type="text" name="othfee" maxlength="8" value="" class="inputText ime-off" style="width: 80px;"/>
37         td>
38         <td style="text-align:center;padding: 0px;vertical-align: middle;">
39             <a href="javascript:void(0);" class="otherFeeDeleteBtn" tabindex="-1">
40                 <img src="/static/global/icons/delete16X16.png" border="0" style="margin-top:2px;">
41             a>
42         td>
43     tr>
44     tbody>
45 table>
46 
47 
48 
49 
50     <div style="width: 95%; height: 150px; overflow: auto; position: relative;">
51         <table border="0" cellspacing="0" cellpadding="0" class="table-form Tlist" id="tblOtherFee" style="margin-left:2px;">
52                 <tr>
53                     <td style="width:70px;" align="center"><label class="formbox-title">其他费用label>td>
54                     <td style="width:120px;" align="center"><label class="formbox-title">代码label>td>
55                     <td style="width:50px;" align="center"><label class="formbox-title">归属人label>td>
56                     <td style="width:70px;" align="center"><label class="formbox-title">费率label>td>
57                     <td style="width:90px;" align="center"><label class="formbox-title">费用label>td>
58                     <td style="width:35px;text-align:center;padding: 0px;vertical-align: middle;">
59                         <a href="javascript:void(0);" id="otherFeeAddBtn" tabindex="-1">
60                             <img src="/static/global/icons/plus16X16.png" border="0" align="middle" style="margin-top:2px;"/>
61                         a>
62                     td>
63                 tr>
64                 
65                 <script type="text/javascript">
66                 //页面刚刚加载时默认调用的方法，生成一个数据行，其中的下拉选可以点击
67                     addOtherFeeRow("MY","C","0.2","");
68                 
69                 script>
70                 
71                 
72         table>
73     div>

实际效果图：

 

改进的代码：

 1 var selectTemp = $('-请选择-AW/制单费CG/港口费LA/活动物操作费MA/归属代理人杂费MO/杂费 MY/燃油费 RA/危险品操作费    SC/安全附加费    SD/地面运费    TX/税   VC/声明价值附加费');
 2     if (othfeeId) {
 3         //trJQ.find("[name$='othfeeId']").val(othfeeId);
 4         selectTemp.val(othfeeId);
 5     }
 6 //删除了下拉选的html内容，并在td中加入class=‘othfeeSelect’，用来定位便于append进Dom元素
 7     trJQ.find('.othfeeSelect').append(selectTemp);
 8 $('#tblOtherFee').append(trJQ);
 9     //渲染新加入的下拉选
10     $("select[name='othfeeId']:last").select2();