javascript - 更改按钮属性会触发我的表单提交吗？

Question

我有一个按钮，我想将其从常规按钮动态更改为表单提交按钮。

即我的按钮以 type='button' 开头，以防止它在第一次点击时提交我的表单。

<button id="myButton" type="button">Button</button>

然后，我将单击事件绑定(bind)到我的按钮，以将其更改为下次单击的提交类型。由于某种原因，它会在第一次点击时触发提交。

$('#myButton').click(function(){
  $(this).prop('type', 'submit');
});

我怎样才能实现我想要做的事情？我希望我的按钮变成一个在第二次单击而不是第一次单击时提交表单的按钮。

Answer 1

您需要防止在第一次点击时发生默认点击操作，但在第二次点击时允许默认点击操作提交表单。

您可以使用 jQuery 的 one() 来做到这一点

$('#myButton').one('click', function(e) {
  $(this).prop('type', 'submit');
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="alert('Form Submitted!');return false;">
  <button id="myButton" type="button">
    My Button
  </button>
</form>