Question

所以当有人点击回复时，我会尝试弹出一个表单来输入您的回复。提交表单后，它会一直消失，直到您下次回复。

这是有效的，除了第一次之后，我提交了两次信息。如果我第三次这样做，表单会提交三次。基本上发生的事情是，在我再次隐藏之后，之前的表单似乎没有重置。

我检查了这个网站/谷歌并尝试过使用reset（）但它没有用。以下是代码：

$(document).on('click', '.secretfeed button', function () {
    var message_id = $(this).attr('name');

    $(".comment_box").show();

    $("#m_id").val(message_id);
    var value = document.getElementById("m_id").value;

    $('#comment_form').submit(function (e) {
        e.preventDefault();

        var commentData = $(this).serialize();
        $.post('../../process_comment.php', commentData, processData);

        function processData(data) {
            //$('comment_form').reset()
            $(".comment_box").hide();
            $('#comment_form')[0].reset();

            RefreshFeed();
        }
    });
});

Answer 1

不是在每次点击时初始化提交功能，而是将其移到click功能之外。 jQuery可能会为每次点击创建一个实例。

$('#comment_form').submit(function (e) {
    e.preventDefault();

    var commentData = $(this).serialize();
    $.post('../../process_comment.php', commentData, processData);

    function processData(data) {
        //$('comment_form').reset()
        $(".comment_box").hide();
        $('#comment_form')[0].reset();

        RefreshFeed();
    }
});

$(document).on('click', '.secretfeed button', function () {
    var message_id = $(this).attr('name');

    $(".comment_box").show();

    $("#m_id").val(message_id);
    var value = $("#m_id").val();
});

另一种方法是在重复使用之前取消绑定点击功能。

Answer 2

我们想要一种可重复使用的方式来处理状态。我们将按钮的状态保存在一个布尔值中，根据请求的状态打开和关闭。模式如下：

var isSending = false;

function onSubmit() {
  isSending = true;
  // Send data
}

function onComplete() {
  // done sending data
  isSending = false;
}

if (!isSending) {
  onSubmit();
}

// When data sending is finished:
onComplete();

上述内容可以采用更有效的方式封装，使用promises来管理状态。（jQuery AJAX函数都返回一个类似promise的对象）：

function oneAtATimeFunction(promisedFunction) {
  var pendingPromise;
  function reset() { pendingPromise = null; }
  return function() {
    if (pendingPromise) { return pendingPromise; }
    pendingPromise = promisedFunction.apply(promisedFunction, arguments)
      .always(reset);
    return pendingPromise;
  }
}

function submitForm() {
  return $.ajax({
    url:    '/foo',
    method: 'POST',
    data:   { data: 'from form' }
  });
}

$('#submit-button').on('click', oneAtATimeFunction(submitForm));

向UI添加一点点我们可以添加一种打开和关闭提交按钮的方法。首先，我们将定义一个辅助函数来处理on和off状态：

function buttonEnable(enabled) {
  $('#submit-button').attr('disabled', !enabled);
}

buttonEnable(false); // disable the button
buttonEnable(true);  // enable the button

全部放在一起：

function onClick() {
  buttonEnable(false);
  return onSubmit()
    .always($.proxy(buttonEnable, null, true));
    // The above is also the same as:
    // .always(function() { buttonEnable(true); });
}

$('#submit-button').on('click', oneAtATimeFunction(onClick));

要在此处查看此操作，请JSBin example。

确保我的表单不会被jquery show / hide多次提交

2 个答案: