jQueryの検証とAJAXによる表の行の更新

Question

私は、クリックするとブートストラップのモーダルを開く各行にテーブルと編集ボタンがあります。テーブル情報は、モーダル上のフォームに入力されます。モーダルには、テーブル情報を更新するための送信ボタンがあります。私はjQuery検証プラグインを使用してフォームフィールドとAJAXを検証し、Flaskバックエンドに送信しています。コードは以下のとおりです。

JS：

$(document).ready(function() { 

$(".lengthEdit").click(function() { 

    console.log('clicked'); 
    var currentRow = $(this).closest("tr"); 

    var value = currentRow.find("td[rel='value']").text(); 

    $(".lengthForm").validate({ 

     rules: { 
      length: { 
       required: true, 
       number: true 
      } 
     }, 
     messages: { 
      length: { 
       required: "Input Required!", 
       number: "Invalid Input!" 
      } 
     }, 

     errorPlacement: function(error, element) { 
      $(element).closest('.form-group').find('.help-block').html(error.html()); 
     }, 
     highlight: function(element) { 

      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      // console.log(x); 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
      $(element).closest('.form-group').find('.help-block').html(''); 
     }, 

     submitHandler: function(event) { 
      $.ajax({ 
       data : { 
        value : $('.lengthForm #value').val(), 
        property : $('.lengthForm #property').val(), 
       }, 
       type : 'POST', 
       url : '/_update_length', 
       success: function (data) { 

        // updates value for property in file and returns in so that it  can be updated in the table 

        currentRow.find("td[rel='value']").text(data.value) 
        $('#lengthEditModal').modal("hide") 

       } 
      }); 
      return false; // ajax used, block the normal submit 
     } 
    }); 
});}); 

HTML表（ダミーデータ）：

<table id="trough1Table" class="table table-bordred"> 
       <thead> 
       <th class="col-sm-5">Property</th> 
       <th class="col-sm-5">Value</th> 
       <th class="col-sm-2"></th> 
       </thead> 
       <tbody> 
       <tr> 
        <td rel="property">Length</td> 
        <td rel="value">10cm</td> 
        <td class="text-right"> 
         <p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-sm lengthEdit" data-title="Edit" data-toggle="modal" data-target="#lengthEditModal" ><span class="glyphicon glyphicon-pencil"></span></button></p> 
        </td> 
       </tr> 
       <tr> 
        <td rel="property">Sensor Distance</td> 
        <td rel="value">20cm</td> 
        <td class="text-right"> 
         <p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-sm lengthEdit" data-title="Edit" data-toggle="modal" data-target="#lengthEditModal" ><span class="glyphicon glyphicon-pencil"></span></button></p> 
        </td> 
       </tr> 
       </tbody> 
      </table> 

HTML MODAL：

<div class="modal fade" id="lengthEditModal" tabindex="-1" role="dialog" aria-labelledby="lengthEditLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="lengthEditLabel"></h4> 
     </div> 
     <div class="modal-body"> 
      <form class="form-horizontal lengthForm" id="length-form" autocomplete="off"> 
       <div class="form-group"> 
        <div class="col-sm-10 col-sm-offset-1"> 
        <div class="input-group"> 
         <input type="text" class="form-control" id="value" name="length"> 
        </div> 
        <span class="help-block" id="error"></span> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Save Changes</button> 
       </div> 
      </form> 
     </div> 
     </div> 
    </div> 
</div> 

問題：

第一列I編集が正常に動作し。ただし、後続の行を編集するたびに、現在の行ではなく編集済みの行が最初に変更されます。モーダルフォームの最初の初期化後にcurrentRowオブジェクトが変更されていないので、私はそれを考える。助けて！

ありがとうございます！

Answer 1

1. .validate()方法は、フォーム上プラグインを初期化するのためなので、clickハンドラ内で呼び出すことはできません。ドキュメント準備完了ハンドラのページロード時には常に.validate()メソッドを1回呼び出します。

2. 複数の要素に一致するセレクタにこのメソッドをアタッチする場合は、jQuery .each()で囲む必要があります。

   $('.class').each(function() { 
       $(this).validate(...); 
   });