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

问题：

我编辑的第一行工作正常。但是，后续行的每次编辑都会改变编辑的第一行而不是当前行。我认为这是因为currentRow对象在模式形式的第一次初始化后没有改变。救命！

谢谢！

Answer 1

.validate()方法适用于 初始化 表单上的插件，因此不应在click处理程序中调用它。始终在文档就绪处理程序内的页面加载时调用.validate()方法。
将此方法附加到匹配多个元素的选择器时，必须用jQuery .each()将其括起来。
```
$('.class').each(function() {
    $(this).validate(...);
});
```

使用jQuery Validation和AJAX进行表行更新

1 个答案: