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

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

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

源代码：

<script type="text/javascript">
//重新生成其他费用索引
function resetOtherFeeListIndex() {
$('#tblOtherFee').find("tr.otherFeeDataRow").each(function(i) {
var trJQ = $(this);
trJQ.find("[name$='othfeeId']").attr("id", "othfeeId" + i).attr("name", "mawb.awbOthfeeDtos[" + i + "].othfeeId");
trJQ.find("[name$='othfeeOwner']").attr("id", "othfeeOwner" + i).attr("name", "mawb.awbOthfeeDtos[" + i + "].othfeeOwner");
trJQ.find("[name$='othfeeRate']").attr("id", "othfeeRate" + i).attr("name", "mawb.awbOthfeeDtos[" + i + "].othfeeRate");
trJQ.find("[name$='othfee']").attr("id", "othfee" + i).attr("name", "mawb.awbOthfeeDtos[" + i + "].othfee");

});
}

//添加其他费用
function addOtherFeeRow(othfeeId, othfeeOwner, othfeeRate, othfee, othfeeDesc) {
var trJQ = $($('#tblOtherFeeTemplate tbody').html());
if (othfeeId) {
trJQ.find("[name$='othfeeId']").val(othfeeId);
}

$('#tblOtherFee').append(trJQ);
resetOtherFeeListIndex();
}

$(function() {

//添加其他费用
$('#otherFeeAddBtn').click(function() {
addOtherFeeRow();
return false;
});
//删除其他费用
$('tr.otherFeeDataRow').find(".otherFeeDeleteBtn").live("click", function() {
$(this).parents("tr.otherFeeDataRow:first").remove();
resetOtherFeeListIndex();
return false;
});
});
</script>

 <table id="tblOtherFeeTemplate" style="display: none;">
     <tbody>
     <tr class="otherFeeDataRow">
         <td>&nbsp;</td>
         <td align="center">

             <select name="othfeeId" style="width:120px;">
     <option value="">-请选择-</option>
     <option value="AW">AW/制单费</option>
     <option value="CG">CG/港口费</option>
     <option value="LA">LA/活动物操作费</option>
     <option value="MA">MA/归属代理人杂费</option>
     <option value="MO">MO/杂费</option>
     <option value="MY">MY/燃油费</option>
     <option value="RA">RA/危险品操作费</option>
     <option value="SC">SC/安全附加费</option>
     <option value="SD">SD/地面运费</option>
     <option value="TX">TX/税</option>
     <option value="VC">VC/声明价值附加费</option>

 </select>

         </td>
         <td align="center">
             <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;"/>
         </td>
         <td align="center">
             <input type="text" name="othfeeRate" maxlength="8" value="" class="inputText ime-off" style="width: 50px;"/>
         </td>
         <td align="center">
             <input type="text" name="othfee" maxlength="8" value="" class="inputText ime-off" style="width: 80px;"/>
         </td>
         <td style="text-align:center;padding: 0px;vertical-align: middle;">
             <a href="javascript:void(0);" class="otherFeeDeleteBtn" tabindex="-1">
                 <img src="/static/global/icons/delete16X16.png" border="0" style="margin-top:2px;">
             </a>
         </td>
     </tr>
     </tbody>
 </table>

     <div style="width: 95%; height: 150px; overflow: auto; position: relative;">
         <table border="0" cellspacing="0" cellpadding="0" class="table-form Tlist" id="tblOtherFee" style="margin-left:2px;">
                 <tr>
                     <td style="width:70px;" align="center"><label class="formbox-title">其他费用</label></td>
                     <td style="width:120px;" align="center"><label class="formbox-title">代码</label></td>
                     <td style="width:50px;" align="center"><label class="formbox-title">归属人</label></td>
                     <td style="width:70px;" align="center"><label class="formbox-title">费率</label></td>
                     <td style="width:90px;" align="center"><label class="formbox-title">费用</label></td>
                     <td style="width:35px;text-align:center;padding: 0px;vertical-align: middle;">
                         <a href="javascript:void(0);" id="otherFeeAddBtn" tabindex="-1">
                             <img src="/static/global/icons/plus16X16.png" border="0" align="middle" style="margin-top:2px;"/>
                         </a>
                     </td>
                 </tr>

                 <script type="text/javascript">
                 //页面刚刚加载时默认调用的方法，生成一个数据行，其中的下拉选可以点击
                     addOtherFeeRow("MY","C","0.2","");

                 </script>

         </table>
     </div>

实际效果图：

改进的代码：

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