jquery에서 알 수없는 요소 ID에 값 추가

Question

사용자가 "행 추가"를 클릭하고 양식에서 새 요소를 가져올 수 있다는 점에서 동적으로 생성 된 양식이 있습니다.

일부 요소는 수량 및 가격입니다. 사용자가 입력 한 값에 따라 값을 변경하고 싶습니다. 그래서 그가 qty = 4를 선택하고 price = 10을 얻으려면 amount = 40이 필요합니다.

입력 ID가 동적으로 생성되므로 가격이나 금액의 선택자로 사용할 것을 모른다. 양식 제출에

var form = "<tr><td>Quantity</td> 
       <td><input class='qty' type='text' id='qty[]' name='qty[]'></td>"; 

    form += "<td>Part Num</td> 
      <td><input type='text' id='part[]' name='part[]'></td>"; 

    form += "<td>Description</td> 
      <td><input class='desc' type='text' id='desc[]' name='desc[]'></td>"; 

    form += "<td>Unit Price</td> 
      <td><input type='text' id='price[]' name='price[]'></td>"; 

    form += "<td>Amount</td> 
      <td><input type='text' id='amount[]' name='amount'></td></tr>"; 

      $('#addItem').click(function(){ 
        $('#itemsTable').append(form); 
      }); 


    $(document).on('change','.qty',function(){ 

      //What can i use as a selector for value_of_qty and value_of_price here??? 

      //var total = $(value_of_qty) * $(value_of_price); 
      //$(id_of_amount).val(total); 
     }); 

i는 다음을 참조하십시오

<tr class="tableRow"> 
    <td>Quantity</td> 
    <td><input class='qty' type='text' id='qty[]' name='qty[]'/></td><td>Part Num</td> 
    <td><input type='text' id='part[]' name='part[]'/></td> 
    <td>Description</td> 
    <td><input class='desc' type='text' id='desc[]' name='desc[]'/></td> 
    <td>Unit Price</td> 
    <td><input type='text' class="price" id='price[]' name='price[]'/></td> 
    <td>Amount</td> 
    <td><input type='text' class="amount" id='amount[]' name='amount'/></td> 
</tr> 

$(document).on('change', '.qty', function() { 
    var qty = $(this).val(); 
    var price = $(this).closest('.tableRow').find('.price').val(); 
    var total = qty * price; 
    $(this).closest('.tableRow').find('.amount').val(total); 
}); 

Answer 1

를, 당신의 HTML이 잘못되었습니다. 상위 요소에 추가하는 HTML을 동적으로 생성하고 각각의 부속 장치에 고유 한 id 값을 할당해야합니다. 여기에 내가 무엇을 할 것이라고입니다 :

var g_ROWNUM = 1; 

$('#addItem').click(function() { 

    var form = '\ 
     <tr>\ 
      <td>Quantity</td><td><input class="qty" type="text" id="qty_${num}" name="qty[]"></td>\ 
      <td>Part Num</td><td><input type="text" id="part_${num}" name="part[]"></td>\ 
      <td>Description</td><td><input class="desc" type="text" id="desc_${num}" name="desc[]"></td>\ 
      <td>Unit Price</td><td><input type="text" id="price_${num}" name="price[]"></td>\ 
      <td>Amount</td><td><input type="text" id="amount_${num}" name="amount[]"></td>\ 
     </tr>\ 
    '.replace(/\$\{num\}/g,g_ROWNUM++); 

    $('#itemsTable').append(form); 

}); 

$(document).on('change', '.qty', function() { 

    var qtyInput = $(this); 
    var num = qtyInput.attr('id').replace(/^qty_/,''); 
    var priceInput = $('#price_'+num); 
    var amountInput = $('#amount_'+num); 

    var total = qtyInput.val()*priceInput.val(); 
    amountInput.val(total); 

}); 

당신이 볼 수 있듯이, 이것은 당신이 생성 된 번호를 추출하고 변경된 수량 요소와 동일한 행의 가격과 양 요소를 검색하는 데 사용, 다음 중 하나를 적용 할 수 있습니다 동적 변경 사항을 해당 행의 요소에 적용합니다. 당신은 사용자가`#addItem를 클릭 할 때 동적으로`# itemsTable` 요소에 추가하고 싶은 HTML을 포함하는`form` 변수, 주위 closured 것 같은 그것은 나에게 보이는

http://jsfiddle.net/p6wrkne4/1/

Answer 2

<tr> 
    <td><input class="qty"></td> 
    <td><input name="price[]"></td> 
</tr> 

.qty 입력이 있으니 tr으로 시작하여 input[name='price[]']을 얻으십시오. 코드에서 :

$(document).on('change','.qty',function(){ 
    var $qty = $(this); 
    var $price = $qty.closest("tr").find("input[name='price[]']"); 
}); 

Answer 3

당신은이 (대략)이 구조 :

를이 같은 클래스를 추가하여 HTML을 구조 조정해야

[qty] => Array 
    (
     [0] => asdfdasf 
     [1] => asdfdasf 
    ) 
and so on.... 

Answer 4

이 코드보십시오 : 중복 id의이 있기 때문에 나는 내 댓글에 설명 된대로

$(document).on('change','.qty',function(){ 
    var qtyInput = $(this); 
    var price = qtyInput.closest("tr").find("input[name='price[]']").val(); 
    var amount = qtyInput.val() * price;   
    qtyInput.closest("tr").find("input[name=amount]").val(amount); 
});