点击按钮阻止表单提交

Question

我有一个片段可以防止双击样式为按钮的链接。

        $('.btn').on('click', function(e) {

            if( $(this).prop('disabled') == true) {
                $(this).attr("href","javascript:void(0);");
            } 

            $(this).prop('disabled',true);

        });

我的问题是这段代码似乎阻止了任何提交按钮提交表单。这是上述代码的预期行为吗？

Answer 1

似乎禁用按钮可以防止事件冒泡 DOM 并触发提交。有几种解决方法，但最简单的可能是检查它是否是表单上的提交按钮并像这样手动处理它：

$('.btn').on('click', function(e) {
  var trigger = $(this);
  if (trigger.prop('disabled') == true) {
    trigger.attr("href", "javascript:void(0);");
  }

  trigger.prop('disabled', true); // disables form submit event bubbling

  if (trigger.is('[type="submit"], .submit')) { // check if submit button
    var form = trigger.closest("form, .form"); // find form
    if (form.length) { // if form exists
      form.submit(); // manually trigger form submit
    }
  }
});

$("form").on("submit", function() {
  alert("submitting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="border: 2px solid black; padding: 10px 0;">
  Form:
  <input type="submit" class="btn" />
  <button class="submit btn">.submit</button>
</form>
<br/>
<button class="btn">Non-form button.btn</button>
<input type="button" class="btn" value="non-form input.btn">

点击按钮阻止表单提交

button on-click prevents form submission

javascript

jquery

submit

button

form-submit