thymeleafテーブルから入力値を受け取る方法は？

Question

Thymeleafを使用して、Springからテーブルを塗りつぶします。

<tr th:each="customerOrder : ${selected}" > 
     <td> 
      <img th:attr="src=${customerOrder.photo}" width="80" height="56" /> 
     </td> 
     <td align="center"> 
      <span th:text="${customerOrder.name}" >Name</span> 
     </td> 
     <td align="center" > 
      <input type="text" name="quantityNew" th:value="${customerOrder.quantity}"/>   
     </td> 
     <td align="center"> 
      <div class="editInfoFromCustomerOrder"> 
       <input type="hidden" name="editOrderId" th:value="${customerOrder.id}"/> 
       <input type="button" value="Save edit"/> 
      </div> 
     </td> 
</tr> 

そして私は<input type="hidden" name="editOrderId" th:value="${customerOrder.id}"/>から値を受信したいが、私のコードは動作しない理由を私は理解していません。
私はこのコードを使用しよう：

$('.editInfoFromCustomerOrder').on('click', function (e) { 
    var orderId = $(this).find('input[name=editOrderId]').val(); 
    var quantityChange = $(this).find('input[type=text][name=quantityNew]').val(); 
    alert("OrderId: "+orderId+" Quantity: "+quantityChange); 
    }); 

私は値orderIdを受けるが、quantityChangeを受信しません。
私の間違いはどこですか？

Answer 1

.find()は、使用している要素の子のみを検索します。 $(this)は（子要素name=editOrderIdを持つ）divであるため、その要素を見つけることができます。 name=quantityNewはdivの外にあるので、一致しません。

私の意見では、あなたがより多くのこのような呼び出しのこれらの種類を構成する必要がありますが：

Javascriptを

$(function() { 
    $('.save').click(function (e) { 
    var id = $(this).data('customer-id'); 
    var quantity = $('#quantity-' + id).val(); 
    alert("OrderId: " + id + " Quantity: " + quantity); 
    }); 
}); 

Htmlの

<tr th:each="customerOrder : ${selected}" > 
    <td><img th:attr="src=${customerOrder.photo}" width="80" height="56" /></td> 
    <td align="center" th:text="${customerOrder.name}" /> 
    <td align="center"><input type="text" th:id="${'quantity-' + customerOrder.id}" th:value="${customerOrder.quantity}"/></td> 
    <td align="center"><input type="button" class="save" th:attr="data-customer-id = ${customerOrder.id}" value="Save edit"/></td> 
    </tr>