Question

我有一张表，其中每一行都是一个表格：

<form class="update_record">
    <td><textarea name="feedback"></textarea></td>
    <td><input type="text"></td>
    <td><input type="submit" class="update_record"><span class="update-success" style="display:none;"></span></td>
</form>
<form class="update_record">
    <td><textarea name="feedback"></textarea></td>
    <td><input type="text"></td>
    <td><input type="submit" class="update_record"><span class="update-success" style="display:none;"></span></td>
</form>

表格重复...

ajax请求：

$(document).ready(function() {

$('.update_record').submit(function() {

var $form = $(this);
var serializedData = $form.serialize();

request = $.ajax({
    url: "...",
    type: "post",
    data: serializedData
});

//success
request.done(function (){
     $('.update-success').show();
});

我想仅在已提交的行上显示成功消息。当前代码显示每行的成功消息。如何仅指定已更新的行？

Answer 1

大概你的提交处理程序看起来像：

$('.update_record').submit(function(){})

在处理程序this内是表单事件的实例。存储可以传递给回调的引用，然后您可以使用find()

查找所需元素的实例

$('.update_record').submit(function() {

  var $form = $(this);

  $.ajax({
    url: '...',
    /* other options*/
    success: function(response) {
      $form.find('.update-success').show();
    }

  });
});

如果您使用按钮点击处理程序... this是按钮，可以使用next()找到范围

更新行的AJAX成功消息

1 个答案: