Question

我希望我的jquery代码在以下表单中的提交按钮中多次单击。

我有一个跟踪提交事件的YUI事件监听器，每次都调用一个回调函数。如何单击一次并生成多个提交事件？

<!DOCTYPE html>
<html>
<head>
<style>

 button { margin:10px; }
 div { color:blue; font-weight:bold; }
 span { color:red; }
 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
<form class="forms" id="result_form" method="post" >
 <input type="submit" id = "click" value="Sum Result" ></input>
 </form>

 <button id = "B2">Button #2</button>

  <script>

  $("#click").click(function () {
  alert("Test");
  });

  $("#B2").click(function () {
  for(j=0;j<10;j++)
  $("#click").trigger('click');


   </script>

   </body>
   </html>

在上面的代码中，当我点击B2时，我只收到一个警报，但是当我将提交放在表单之外时，我可以获得10个警报。

Answer 1

您正在提交表单。结果是您离开了页面，因此您停止了所有脚本。由于您没有精确确定表单的action参数，因此它是当前页面，因此您只需在循环的第一次迭代时自行替换当前页面。

如果您想在不重新加载的情况下从一个页面发出多个请求，通常的解决方案是使用ajax。

你可以做例如

for(j=0;j<10;j++) {
  $.ajax('someurl');

Answer 2

您可以在不使用Ajax重新加载页面的情况下发布表单。为此，您需要在提交表单时首先停止浏览器的默认行为。您可以通过在提交事件上调用e.preventDefault()来执行此操作。然后使用ajax并将表单序列化为数据。 jQuery和YUI都提供了执行此操作的实用程序：

// jQuery
$('#result_form').on('submit', function (e) {
  e.preventDefault();
  $.post('cmd/result', $(this).serialize());
});

// YUI
Y.one('#result_form').on('submit', function (e) {
  e.preventDefault();
  Y.io('cmd/result', {
    method: 'POST',
    form: { id: this }
  });
});

使用Jquery多次单击“提交”按钮

2 个答案: