今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的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();

在select2插件中append下拉选,点击没反应的解决的更多相关文章

  1. Bootstrap 下拉框点击没反应

    应该是第一次点击下拉框没反应,我把HTML复制出来单独运行,都是好的,就是在项目里面无法运行 哪里的js出问题了?找不到原因,控制台里的js也不报错 解决方法: $(function () { $(' ...

  2. ionic中select下拉框点击无反应解决办法

    两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码  

  3. jquery的clone()引发的问题,下拉框点击没有反应

    此段代码是对某块元素的移位:上移.下移.对比修改前后的两段代码: 修改前: //点击移位 function move(obj,posi){ var al=$(obj).parent('li').par ...

  4. 选择屏幕中的下拉框和dialog中下拉框设计

    REPORT  YTEST014. PARAMETERS: auart LIKE vapma-auart  AS LISTBOX   VISIBLE LENGTH 6. AT SELECTION-SC ...

  5. 初始化jsp页面下拉选备选项【我】

    将下列 script标签放到页面的最下端 <!-- 初始化的全局变量,供js中使用,主要拼接下拉选的初始化值 --> <script type="text/javascri ...

  6. poi实现生成下拉选联动

    在我们实际的程序开发中,经常需要用到从excel导入数据中系统中,而为了防止用户在excel中乱输入文字,有些需要用到下拉选的地方,就需要从程序中动态生成模板.本例子简单的讲解一下,如何生成级联下拉选 ...

  7. poi实现生成下拉选

    在我们日常开发中,经常需要使用poi操作excel文件,现在就简单介绍一下在poi中是如何生成下拉选的. 1.创建workbook 2.创建数据约束 3.设置数据的有效性 @Test public v ...

  8. 【java+selenium3】select 下拉选 (八)

    一.select 下拉框 1.下拉选的处理类:Select 如果页面元素是一个下拉框,我们可以将此web元素封装成Select对象. Select select = new Select(WebEle ...

  9. Excel中添加下拉框

    数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开

随机推荐

  1. Springboot前后端分离中,后端拦截器拦截后,前端没有对应的返回码可以判断

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时 ...

  2. find: paths must precede expression

    郁闷了今天进行如下的查询居然报告错误, [root@localhost /]# find /root/ -name *.txtfind: paths must precede expressionUs ...

  3. UVA 11468 AC 自动机

    首先我们应该是枚举 L个位置上的每个字符来得到最终概率 然后AC自动机的作用就是为了判断你枚举的地方是否对应了单词节点,如果对应了,就肯定要不得 #include <iostream> # ...

  4. 简单LCS HDU_1503

    学了一下最长公共子串,它是属于dp里面的 dp=max{(i,j-1),(i-1,j),(i-1,j-1)+d}问题,不得不说,规划方向确实厉害,当然这只适用于两个字符串匹配的问题,n个字符串的话,我 ...

  5. postman批量接口测试注意事项

    1.使用cvs文件 导入文件后最后行出现\r符号 用文本打开 删除最后一行空白行 2.打印cvs文件中的接口调用的参数 Pre-request Script: var beginDate=data.b ...

  6. JAVA初学者——算数运算符

    Hello!大家好,我是浩宇大熊猫,又是学习java的一天,开开森森~ 运算符:也就是对常量或者变量进行操作的符号 表达式:用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式,不同的 ...

  7. 《Docekr入门学习篇》——Docker简介

    Docker简介 什么是docker Docker是Docker.inc公司开源的一个基于LXC技术之上构建的Container容器引擎,源代码托管在GitHub上,基于Go语言并遵从Apache2. ...

  8. Centos7.6部署rsyslog+loganalyzer+mysql日志管理服务器

    参考来自: the_script :https://yq.aliyun.com/articles/675198 名山.深处:https://www.cnblogs.com/skychenjiajun/ ...

  9. 漫谈设计模式(二):单例(Singleton)模式

    1.前言 实际业务中,大多业务类只需要一个对象就能完成所有工作,另外再创建其他对象就显得浪费内存空间了,例如web开发中的servlet,这时便要用到单例模式,就如其名一样,此模式使某个类只能生成唯一 ...

  10. 连词词组|relax|brings about a rise in|Chance are (high)that|Have no clue|Be passionate about|Tedious|overwhelmed by piles of

    efficient有效率的 effective有效果的 Make sb. Do Stuff没有复数 首先的三种表述:First off=To begin with=For starters 其次:Ad ...