onChange仅偶尔触发一次
onChange仅偶尔触发一次
提问于 2012-10-18 20:51:13
我有以下问题:我有一个包含两个输入元素的表。如果它们中的一个比另一个大，则应根据比较结果对整行进行着色。我使用onchange事件和第一次加载站点时触发此事件。这些过程运行良好，但onchange事件仅在4个更改中的1个更改中触发。
table语句如下：
<div class="grid">
<table id="table" class="tableRegion w100">
<thead style="text-align:left">
<tr>
<fmt:bundle basename="res/web/ec_resources">
<td class="tableHeader">
...
</td> ...
</fmt:bundle>
</tr>
</thead>
<tbody>
<c:set var="i" value="0"/>
<c:forEach var="participation" items="${someForm.list}">
<tr id="participationRow${i}">这里是table > tr >td的代码：
<td class="right bottom nowrap">
<div>
<c:out value="${someForm.event.currency.code}"/>
<fmt:formatNumber maxFractionDigits="2" minFractionDigits="2" var="ovFee" value="${overallFee}" />
<c:if test="${someForm.array[i].feeDebit != 0.0}">
<spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" />
</c:if><c:if test="${someForm.array[i].feeDebit == 0.0}">
<spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" value="${ovFee}"/>
</c:if>
</div>
</td>
<td class="right bottom nowrap">
<div class="padT5"><c:out value="${someForm.event.currency.code}"/> <spring:input class="right paid" path="array[${i}].feePaid" maxlength="7" size="6" onchange="isPaid(${i});"/></div>
</td>被调用的skript如下所示：
$(document).ready(function(){
$('#table > tbody > tr').each(function(i) {
var paid = parseFloat($(this).find('input.paid').val());
var debit = parseFloat($(this).find('input.debit').val());
if (paid == debit)
$('#participationRow'+i).addClass("green");
else if (paid > debit)
$('#participationRow'+i).addClass("yellow");
}
);
});
function isPaid(i){
var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
if (paid == debit)
$('#participationRow'+i).addClass("green");
else if (paid > debit)
$('#participationRow'+i).addClass("yellow");
}事件偶尔被触发的原因是什么？我和jQuery和onclick交叉检查过了。它们都只是偶尔触发一次。不管我是通过点击离开还是通过Tab键离开。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-10-19 17:22:29
好吧..。看了一段时间，在@kabaros and @Flater的帮助下，我发现了以下有效的方法：
$(document).ready(function(){
$('input.paid').change(function(){
var i = $(this).closest('tr')[0].sectionRowIndex;
isPaid(i);
});解决方案是触发的$('input.paid')，而不是$('input')。计算行数也不是那么容易，但上面的代码正确地计算了行数。不幸的是，input-field中的onchange只是偶尔触发一次！
Stack Overflow用户
发布于 2012-10-18 22:06:35
当触发器应该运行时，您的代码缺少任何触发器的定义。
第一部分( .each()块)仅在$(document).ready();上执行，这意味着它在每次页面加载时执行一次(恰好在文档加载完成之后)。
isPaid()函数只不过是一个函数，我看不到它被调用的位置，因为它没有出现在当前的代码片段中。
你的代码本身看起来没问题，但它只是缺少任何形式的触发器。
你可能会期望类似这样的东西：
$("input").change(function() {
var the_row = $(this).parent().parent(); //finds the <tr> it belongs to.
var i = the_row.attr("id").replace("participationRow","");
isPaid(i);
});有一些方法可以改进这一点，但这是您的代码中缺少的关键。
Stack Overflow用户
发布于 2012-10-19 16:39:22
function highlightIfPaid(i){
var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
if (paid == debit)
$('#participationRow'+i).addClass("green");
else if (paid > debit)
$('#participationRow'+i).addClass("yellow");
}
$(document).ready(function(){
//just use jquery for binding to change event,
//my guess is that Spring doesn't have a value for i at the point and jquery is not loaded by then so $ is undefined
$('input.debit').change(function(){
//you need to get the index i based on your table structure
//I assumed this is just the index of the row
//I get this method from this other post http://stackoverflow.com/questions/1620391/find-table-row-index-using-jquery
var i = $(this).closest('tr').prevAll().length;
highlightIfPaid(i);
});
//Dry: highlight your rows on first load
$('#table > tbody > tr').each(highlightIfPaid);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12955136
复制相关文章
相似问题
腾讯云开发者
