在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();