在IE/Opera中，代码运行多次

Question

我在我的页面上遇到了一个问题，代码在IE和Opera中执行多次，但在FF，Chrome和Safari中正常工作。我使用的是最新版本的jQuery、验证插件和表单插件。我的代码源自以下HTML：

<form action="/case_study/php/survey_submit.php" id="mt_survey" method="post">
...
...             
<fieldset id="submit_button_box">
    <input id="submit_button" type="submit" value="Submit Case Data" />
</fieldset></form>

当我点击提交按钮时，应该运行以下jquery代码：

  $('#mt_survey').submit(function() {
    if ( ($("#mt_survey").valid() == true) || confirm("Unfinished form, continue saving as temporary?")) {
      $('#mt_survey').ajaxSubmit({
         data: {table: "mt_data"},
         target: '#messages',
         success: function() { 
           $('#messages').fadeIn('slow');
           $( 'html, body' ).animate( { scrollTop: 0 }, 0  );}
          });
        }
    return false;
   });

现在，当我第一次点击提交按钮时，这个代码能够正常工作。此时，表单已被清空，以便为下一组数据做准备。以下是相关的代码：

  $('#clear_form').click(function() {
    $("#mt_survey").resetForm();
    $("#messages").replaceWith('<div id="messages"></div>');
    $("#messages").hide();
    $("#escort_div").hide();
    $("#transport_a_div").hide();
    $("#transport_l_div").hide();
    $("#item_div").hide();
    $("#item2_div").hide();
    $("label.error").hide();
    $("#correction_button").attr('disabled', 'disabled');
    $("#submit_button").attr('disabled', '');
  });

现在，一旦完成了这个操作，表单会再次填写并再次点击提交。但是，在IE和Opera中，它的代码会运行多次。我确定它正在运行多次，因为我在那里放置了警报，但大多数情况下它会多次调用我的“survey_submit.php”文件并将数据插入MySQL。有什么想法吗？这一直困扰着我很长时间，我看不出它为什么要这样做。

- The_Denominater

---

你是否考虑使用 $("#messages").empty(); 代替 $("#messages").replaceWith('<div id="messages"></div>');？ - Šime Vidas

resetForm()是做什么的？这不是我所知道的标准jQuery方法。 - alexp

我建议在jQuery中创建一个“计数器”，如果要保存表单的临时副本，则将其设置为1，否则默认为0。在.submit{}中，检查计数器的值，并根据先前完成的操作，在提交到action =“”目标之前停止提交。 - Ortund

我不认为这里有任何会导致这种情况的代码，我们还能看到更多的代码吗？ - Rob Forrest

#messages 是 iFrame 还是 div？ - nobody

Answer 1

你真的需要使用表单插件吗？你可能可以通过其他方式达到相同的效果。

$('#mt_survey').submit(function() {
   var $this = $(this);
   if ( ($this.valid() == true) || confirm("Unfinished form, continue saving as temporary?")) {
     $.ajax({
        data: $this.serialize + "&table=mt_data",
        success: function(response) { 
          $('#messages').html(response).fadeIn('slow'); //you may also need to do some processing of the response data before injecting as html
          $( 'html, body' ).animate( { scrollTop: 0 }, 0  );}
         });
       }
   return false;
  });

这样调试会更容易

- wheresrhys

Answer 2

IE和Opera正在缓存数据并使用缓存数据，这就是为什么您无法再次调用的原因。

将代码更改为：

$('#mt_survey').ajaxSubmit({
     cache : false,
     data: {table: "mt_data"},

我之前也遇到过这个问题，希望能对你有所帮助

- Ali Adravi