onChange가 한 번만 트리거합니다.

Question

다음과 같은 문제가 있습니다. 2 개의 입력 요소가있는 테이블이 있습니다. 그 중 하나가 다른 것보다 크면, 전체 행은 비교에 따라 색상이 지정되어야합니다. 사이트를로드하는 동안 onchange 이벤트와 처음으로이 작업을 트리거합니다. 절차는 정상적으로 작동하지만 onchange 이벤트는 1/4의 변경 사항 중 하나에서만 트리거됩니다.

테이블 문은 다음과 같다 :

<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}"> 

그리고 여기에 테이블의 코드> TR> TD :

$(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"); 

} 

:

<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> 

호출되는 가량이 스크립트는 다음과 같다

이벤트가 한 번만 트리거되는 이유는 무엇입니까? 나는 jQuery와 onclick을 교차 점검했다. 그들은 모두 한 번만 트리거됩니다. 아무리 멀리 클릭하거나 탭하여 떠날지라도 상관 없습니다.

Answer 1

좋아 ... 잠시보고 싶게 @kabaros의 도움으로 @Flater 나는 일을 다음과 발견 :

$(document).ready(function(){ 
$('input.paid').change(function(){ 
    var i = $(this).closest('tr')[0].sectionRowIndex; 
    isPaid(i); 
}); 

을 솔루션이었다 트리거있어 $('input.paid')보다는 $('input') . 행을 세는 것도 쉽지는 않지만 위의 코드는 행을 올바르게 계산합니다. 죄송하지만 의 input 필드는 한 번만 트리거됩니다.

Answer 2

코드가 실행될 때 트리거의 정의가 부족합니다.

그 일단 (문서가 끝난 직후 로딩.) 페이지로드마다 실행되는 것을 의미합니다 (.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); 
}); 

이 개선 할 수있는 방법이있다, 그러나 이것은 당신이 당신의 코드에서 놓치고있는 중요한 열쇠입니다.

Answer 3

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); 
    });