单击多个表单要求确认并提交该表单

Question

所以我有一个表，里面有几个条目。您可以像这样删除每个条目(这是使用Laravel 5.2时建议的方式)：

<form class="delete" action="//localhost:3000/admin/market-managers/11" method="POST">

    <input type="hidden" name="_token" value="XXXXXXXXXXXXXXXXXXX">
    <input type="hidden" name="_method" value="DELETE">

    <button type="submit" class="delete-button"></button>

</form>

<div class="confirmation-buttons">
  <button class="confirm-button">Confirm</button> 
  <button class="cancel-button">Cancel</button>
</div>

现在，它工作得很好。但我希望弹出一个“确认或取消”按钮。所以我写了这个：

$('.delete').on('submit', function(event) {

  event.preventDefault();

  var form = $(this);

  $(this).next('.confirmation-buttons').show();

  $('.cancel-button').click(function() {
    $(this).parent('.confirmation-buttons').hide();
  });

  $('.confirm-button').click(function() {
    form.submit();
  });

});

它的工作方式与它显示的一样，如果您取消，它们将隐藏，但如果您确认不会发生任何事情。

Answer 1

问题是您向确认按钮添加了多个click处理程序。每次单击表单的提交按钮时，它都会向确认按钮添加另一个单击处理程序。单击cancel按钮不会将其删除，因此当您最终单击确认按钮时，它将运行所有累积的单击处理程序。它们将按照添加的顺序运行，因此它将提交用户提交的第一个表单，即使用户取消了该表单。由于提交表单会重新加载页面，因此他们确认的实际表单将不会提交。

一般来说，在其他事件处理程序中添加事件处理程序是错误的。不要在用户每次单击submit时都添加click处理程序，只需绑定一次，使用全局变量来记住他们最后单击submit按钮的表单。

$(function() {
    var form;

    $('.cancel-button').click(function() {
        $(this).parent('.confirmation-buttons').hide();
        form = null;
    });

    $('.confirm-button').click(function() {
        if (form) {
            form.submit();
        }
    });

    $('.delete').on('submit', function(event) {
        event.preventDefault();
        form = this;
        $(this).next('.confirmation-buttons').show();
    });
});

在设置form时，使用this而不是$(this)，这样form.submit()将只运行标准的Javascript提交函数，而不是重新运行jQuery处理程序。

或者，您可以使用$('.delete-button').on('click')代替$('.delete').on('submit')，并将delete按钮更改为type="button"而不是type="submit"。