동적으로 생성 된 텍스트 상자의 합계 값

사용자 입력 (JSFiddle link)에서 동적으로 테이블을 생성합니다. 이제 테이블의 텍스트 상자를 합산하려고합니다. 이렇게하기 위해 모든 입력란에 공통 클래스를 추가하고 결과 텍스트 상자에 ID를 추가했습니다. 그러나 onchange 이벤트는 텍스트 상자에 값을 입력 할 때 실행되지 않습니다. 내가 여기서 무엇을 놓치고 있니? 사전에동적으로 생성 된 텍스트 상자의 합계 값

$(document).ready(function() { 
    $('#amortTable').click(function() { 
     //User will input number of payments 
     var i = $('#numOfRows').val(); 
     var s2 = "<table><th>Month No.</th><th>Cash Outflow</th>" 
     for (var j = 0; j < i; j++) { 
      s2 += "<tr><td>" + (j + 1) + "</td><td><input type='text' class='payment' id='payment" + (j + 1) + "' /></td></tr>"; 
     } 
     s2 += "<tr><td></td><td><input type='text' id='paymentSum' readonly='readonly' style='background-color:#C0C0C0' /></td></tr></table>"; 
     $('#amortizationTable').html(s2); 
    }); 

    $('.payment').on("change", function() { 
     var sum = 0; 
     $(".payment").each(function() { 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
      } 
     }); 
     $('#paymentSum').val(sum); 
    });  
});

감사 :

여기에 테이블 생성 코드와 텍스트 상자 값에 대한 합계 내 JQuery와있다.

출처

2013-04-02 Snoopy

테이블을 만들 때 ''을 추가하는 것을 고려하십시오. 예로서 IE는 tbody (이전 IE 버전)가없는 테이블을 렌더링하지 않습니다. – GottZ

당신은 사용해야

$("#amortizationTable").on("change", ".payment", function() { 
    // your code from above 
});

은 jsFiddle에 적용 - http://jsfiddle.net/XeuB8/17/

사항은 말 그대로 단지 (주석) 1 개 라인을 변경하고 그것을 작동하는 것 같다.

DOM 준비가되었을 때 change 이벤트를 바인딩하기 때문입니다. 그러나 동적으로 행을 추가하고 있습니다 (및 input 요소). 따라서 새 요소에는 이벤트가 바인딩되지 않습니다.

내가 제공 한 코드는 하나의 이벤트 핸들러를 테이블 요소에 연결함으로써이를 해결합니다. 무엇이든지 change 이벤트가 테이블의 어디서나 발생하면 요소에 payment 클래스가 있는지 확인합니다. 포함되어 있으면 해당 컨텍스트에서 핸들러를 실행합니다. 그렇지 않으면 해당 change에 대한 처리기가 실행되지 않습니다. http://api.jquery.com/on/#direct-and-delegated-events

출처

2013-04-02 13:56:09 Ian

저는 주석문에서 편집 한 것과 같은 것을 작성했습니다. 추가 설명이나 OP로 업데이트 해 주셔서 감사합니다. –

하지만 "클릭"하는 이유는 무엇입니까? – DVM

@JeffShaver 하하 그래, 나는 그걸 많이한다. 즉각적인 대답을 원한다면, 다시 가서 설명해 보라. :) – Ian

'.payment'의 "변경"이벤트 발사되지 않습니다

여기 on에 대한 jQuery를 워드 프로세서에 대한 섹션입니다. 클릭 핸들러 내에 sum 로직을 넣는 것이 좋습니다.

출처

2013-04-02 13:59:52 pmandell

동적으로 생성 된 텍스트 상자의 합계 값

답변

관련 문제