Question

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

即。我的按钮以type =＆＃39;按钮＆＃39;开头。防止它在第一次点击时提交我的表格。

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

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

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

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

Answer 1

用于演示目的的代码和样式内联

这是迄今为止最简单，最安全的

<button type="button" onclick="$(this).hide(); $('#subbut').show()">Click</button>
<button id="subbut" type="Submit" style="display:none">Submit</button>

Answer 2

您需要删除点击事件

试试这个：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="myButton" type="button">Button</button>

＆＃13;

Answer 3

由于click事件仍然适用于您的按钮，即使您更改了类型，也需要在它之间插入一个小延迟并更改类型。尝试：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <button id="myButton" type="button">Button</button>
</form>

＆＃13;

您应该看到第一次点击不提交表单，但第二次点击确实如此。

Answer 4

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

您可以使用jQuery＆＃39; s one()

执行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: