Question

我有一个显示多条记录的页面，我正在尝试编写一个点击处理程序来处理通过ajax帖子提交对各个记录的更改。我使用done（），fail（）和always（）来管理结果。

当ajax调用返回时，我想对提交的记录进行一些更新 - 例如发布已保存的消息，重新启用该记录的提交按钮等 - 但除非我知道提交的特定记录的ID，否则我不能这样做。

我想要做的是将目标记录的ID传递给done（），以便done（）中的代码可以对最初调用它的记录进行必要的更改。

这是我的代码，它显示了我在做什么，但哪些不起作用，因为变量target_id在这些函数中没有值。如何将该变量传递给这些函数？

$("#container").on("click", ".save-button", function(e) {

  if ($(this).hasClass('disabled')) {return;}

  var button_html = $(this).html();
  $(this).html('Please wait...');
  $(this).addClass('disabled');

  var target_id = $(this).parents(".record-form").find("#record-id").val();

  var form_poster = $.post("user_form_submit.php", target_form.serialize());

  form_poster.done(function(response_object) {

    var result = response_object['result'];

    if (result=='success') {
      var alert_area = $("#" + target_id + " .alert-area").html("Record Updated");
    } else {
      var alert_area = $("#" + target_id + " .alert-area").html("Record Not Found");
    }

  });

  form_poster.fail(function() {
    var alert_area = $("#" + target_id + " .alert-area").html("An Error Occurred");
  });

  form_poster.always(function() {
    $("#" + target_id + " .save-button").removeClass('disabled');
    $("#" + target_id + " .save-button").html(button_html);
  });

});

Answer 1

这应该有效，我认为问题出在你的id属性上，它们必须是唯一的。整行：

var target_id = $(this).parents(".record-form").find("#record-id").val();

可能只是：

var target_id = $("#record-id").val();

但我的猜测是你有几个ID为record-id的元素，你应该使用一个类。

Answer 2

这是您的代码的简化版本。你正在做太多无用的样板。

$("#container").on("click", ".save-button", function(e) {
  var $saveButton = $(this),
      $recordForm = $saveButton.closest(".record-form"),
      $alertArea = $recordForm.find(".alert-area");

  $saveButton.addClass('disabled').html('Please wait...');

  e.preventDefault();

  $.post("user_form_submit.php", $recordForm.serialize())
  .done(function(response_object) {
    var result = response_object['result'];
    if (result == "success") {
      $alertArea.html("Record Updated");
    } else {
      $alertArea.html("Record Not Found");
    }
  })
  .fail(function() {
    $alertArea.html("An Error Occurred");
  })
  .always(function() {
    $saveButon.removeClass('disabled').html(button_html);
  });
});

请注意

您设置的变量将保留在闭包中，因此您的回调函数可以访问它们（比较$alertArea和$saveButon的使用情况）。你不需要首先“传递任何东西”。
.record-id现在是一个CSS类，你不能在文档中有多个具有相同HMTL ID的元素
您无论如何都不需要从ID构建选择器，您可以使用结构上下文（通过closest()和find()）。
使用preventDefault()，因此表单不会被意外提交两次。

Answer 3

这是在黑暗中拍摄的，因为我无法测试

只需将变量var context设置为this

即可

$("#container").on("click", ".save-button", function(e) {
  var context = this;

  if ($(this).hasClass('disabled')) {return;}

  this.button_html = $(this).html();
  $(this).html('Please wait...');
  $(this).addClass('disabled');

  this.target_id = $("#record-id").val();

  this.form_poster = $.post("user_form_submit.php", target_form.serialize());


  this.form_poster.done(function(response_object) {

    var result = response_object['result'];

    if (result=='success') {
      var alert_area = $("#" + context.target_id + " .alert-area").html("Record Updated");
    } else {
      var alert_area = $("#" + context.target_id + " .alert-area").html("Record Not Found");
    }

  });

  this.form_poster.fail(function() {
    var alert_area = $("#" + context.target_id + " .alert-area").html("An Error Occurred");
  });

  this.form_poster.always(function() {
    $("#" + context.target_id + " .save-button").removeClass('disabled');
    $("#" + context.target_id + " .save-button").html(button_html);
  });

以下是概念验证：jsFiddle

此方法可能更快，因为您只需要调用jQuery一次即可获得target_id

如何将数据传递到jquery done（）？

3 个答案: