JQuery : 동적으로 생성 된 입력 필드의 입력 이벤트

Question

tablerow의 모든 값을 함께 추가하려고합니다. 누군가 입력 필드에 값을 입력하자마자. 테이블 :

<table> 
 
    <thead> 
 
    <tr> 
 
    <th> 
 
     Title 
 
    </th> 
 
    <th> 
 
     Input 
 
    </th> 
 
    <th> 
 
     Total 
 
    </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!-- Dynamially Generated Table Columns --> 
 
    <tr> 
 
     <td>Example</td> 
 
     <td><input type="text" class="inputField" /></td> 
 
     <td>Total: x</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

내가 지금까지 찾은 유일한 해결책은 다음과 같습니다

여기

$(document).on('input', '.inputField', function(){ /* Do something */}); 

문제는,이 라인은 문서의 모든 입력 필드를 읽습니다, 그러나 나는 단지 한 줄의 그것들만을 원한다. 또한 'tbody'으로 변경하면 tablebody의 모든 필드를 읽게됩니다.

그래서 내가 찾고있는 것은 하나의 단일 tablerow의 입력을 선택하는 방법입니다. 따라서이 값들을 가져 와서 함께 추가 할 수 있습니다.

도움을 주셔서 감사합니다.

Answer 1

에 대한 .change을 사용할 수 있으며,이 모든에 입력 한 총을 원한다.

해당 이벤트를 계속 사용할 수 있습니다. 그러나 핵심은 현재 행에 속하는 입력 만 선택하는 것입니다. 이벤트가 발생한 요소를 알고 있기 때문에 해당 정보를 사용하여 상위 행을 찾아 해당 행의 다른 모든 입력 요소를 검색 할 수 있습니다. 다음과 같은 내용 :

$(document).on('input', '.inputField', function(){ 
    var parentRow = $(this).parents("tr").first(); 
    var inputs = parentRow.find('input[type="text"]'); 
    var total = 0; 
    inputs.each(function(){ 
    total += parseInt(this.value); 
    }); 
    alert (total); 
}); 

위의 유의 사항 필드에 입력 한 값이 실제로 유효한 정수인지 그 밖의 값인지에 대한 검증은 포함하지 않았습니다. 그것을 고려해 볼 가치가 있습니다.

예를 들어, <td> 근처에 쓰고 싶다면 <td> 클래스를 작성하는 것이 가장 좋습니다. class="total", 그러면 쉽게 업데이트 할 수 있습니다. 그래서 그 대신 위의 예에서

alert(total); 

, 당신은 이해가되지 않습니다 "모두 함께 추가"그래서, 당신의 예 행에 하나의 필드가있다

parentRow.find(".total").text(total); 

Answer 2

당신이 대답은 당신이 현실에서 같은 <tr> 내에서 여러 <input> 요소가있을 것입니다 의미 가정되는

$('input[name=myInput]').change(function() { ... });