使用 jQuery Validation 和 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（虚拟数据）：

<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 模式：

    <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>

问题：

我编辑的第一行工作正常。但是，后续行的每次编辑都会更改已编辑的第一个行，而不是当前行。我认为这是因为 currentRow 对象在模态表单的第一次初始化后没有改变。帮助！

谢谢！

Answer 1

1. .validate() 方法用于初始化表单上的插件，因此不应在 click 处理程序中调用它。始终在文档就绪处理程序内的页面加载时调用 .validate() 方法。

2. 当将此方法附加到匹配多个元素的选择器时，您必须用 jQuery .each() 将其括起来。

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