javascript - 单击按钮会阻止表单提交

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">