jQuery $ .post在每次POST后提交翻倍

我使用jQuery将信息发布到PHP文件，并且我刚刚意识到该帖子每次都会翻倍。例如，我第一次按它，它会发布一次，当我回去并更改我的表单信息并再次提交时，它会发布两次。如果我再做一遍，它会发布四次，然后是八，十六，等等。使我的应用程序非常缓慢。我已经发布了下面按钮按下的代码。任何可能导致双重职位增加的想法？顺便说一句，我用Firebug找到这个故障。

$("#preferenceSubmit").click(function() { 

    var selected = $('#preferenceTabs').tabs().tabs('option', 'selected'); 

// alert($('input:checkbox[name=dayNight-radio]:checked').val()); 

    // ----------------------------------- Simple Time Preference ---------------------------------------------- // 
    //  e.preventDefault(); 
    // MONDAY, WEDNESDAY, FRIDAY -------------------------------- 
    MWFStart = convertTime($('#MWFStartHour').val(),$('#MWFStartMinute').val(),$('#MWFStartMeridian').val()); 
    MWFEnd = convertTime($('#MWFEndHour').val(),$('#MWFEndMinute').val(),$('#MWFEndMeridian').val()); 

    // TUESDAY, THURSDAY -------------------------------- 
    TRStart = convertTime($('#TRStartHour').val(),$('#TRStartMinute').val(),$('#TRStartMeridian').val()); 
    TREnd = convertTime($('#TREndHour').val(),$('#TREndMinute').val(),$('#TREndMeridian').val()); 

      // ----------------------------------- Advanced Time Preference ---------------------------------------------- // 
    // MONDAY -------------------------------- 
    MStart = convertTime($('#MStartHour').val(),$('#MStartMinute').val(),$('#MStartMeridian').val()); 
    MEnd = convertTime($('#MEndHour').val(),$('#MEndMinute').val(),$('#MEndMeridian').val()); 


    // TUESDAY -------------------------------- 
    TStart = convertTime($('#TStartHour').val(),$('#TStartMinute').val(),$('#TStartMeridian').val()); 
    TEnd = convertTime($('#TEndHour').val(),$('#TEndMinute').val(),$('#TEndMeridian').val()); 


    // WEDNESDAY -------------------------------- 
    WStart = convertTime($('#WStartHour').val(),$('#WStartMinute').val(),$('#WStartMeridian').val()); 
    WEnd = convertTime($('#WEndHour').val(),$('#WEndMinute').val(),$('#WEndMeridian').val()); 


    // THURSDAY -------------------------------- 
    RStart = convertTime($('#RStartHour').val(),$('#RStartMinute').val(),$('#RStartMeridian').val()); 
    REnd = convertTime($('#REndHour').val(),$('#REndMinute').val(),$('#REndMeridian').val()); 


    // FRIDAY -------------------------------- 
    FStart = convertTime($('#FStartHour').val(),$('#FStartMinute').val(),$('#FStartMeridian').val()); 
    FEnd = convertTime($('#FEndHour').val(),$('#FEndMinute').val(),$('#FEndMeridian').val()); 

    // Since SEMESTER is a must for searching for classes, we must create some sort of error notifying the user of the issue. Same goes with adding NO classes. 
    // Create IF statement, and check for an empty string. 
    // Also create an error if Time Preference times are incorrect, for example, if Starting time > ending time is not valid. 

    $.post('search.php', { 'searchClasses[]':tbl.fnGetData(), 'semester' :$('#term').val(), 'MWFStart' : MWFStart, 'MWFEnd' : MWFEnd, 'TRStart' : TRStart, 'TREnd' : TREnd, 'MStart' : MStart, 'MEnd' : MEnd, 'TStart' : TStart, 'TEnd' : TEnd, 'WStart' : WStart, 'WEnd' : WEnd, 'RStart' : RStart, 'REnd' : REnd, 'FStart' : FStart, 'FEnd' : FEnd, 'WeekendStart' : WeekendStart, 'WeekendEnd' : WeekendEnd, 'selectedPreference' : selected} , function(data) { 
     $("#resultTblContainer").html(data); 
     var resultTbl = $("#resultTblContainer > table").dataTable({ 
      "bAutoWidth": true, 
      "bPaginate": false, 
      "bLengthChange": true, 
      "bFilter": false, 
      "bSort": false, 
      "bInfo": false, 
      "bJQueryUI": true 
     }); 
     $("#tabs").tabs("select", $("#tabs").tabs("length")-1); 
     resultTbl.css('width', '100%'); //make sure table fills its container 
    }); 

});

来源

2012-03-27 kp_

您能否显示一些标记？ :) – 2012-03-27 05:17:40

当然，好吧，基本上在POST区域。我提交了用户输入的项目列表（数组）以及一系列文本输入，这些输入是列出的所有其他变量。然后构建一个表格，以便稍后可以在php脚本中的工作完成后显示结果。我真的没有看到任何可能导致它多次POST的东西。 – 2012-03-27 05:41:11

顺便说一句，我使用的DataTables jQuery插件 – 2012-03-27 05:43:49

也许click -event将结合更多然后一次。例如。您可以在之前添加unbind：

$("#preferenceSubmit").unbind().click(function() { 
    ...

来源

2012-03-27 06:16:37 scessor

好的想法，但我不知道如何处理程序可能会被提交16次后3或4提交。 – Arjan 2012-03-27 06:40:02

这工作完美！谢谢！ – 2012-03-27 13:34:25

$("#preferenceSubmit").click(function(e) { 
e.preventDefault(); 

// other code 

});

或

$("#preferenceSubmit").click(function() { 
// other code 
return false; 
});

为了防止形式从与按钮点击提交几次：

var form_submitted = false; 
$("#preferenceSubmit").click(function(e) { 
    e.preventDefault(); 
    if(form_submitted) return false; 
    else form_submitted = true; 
    // other code 
    $.post("search.php", {}, function(data){ 
     // code here 
     form_submitted = false; 
    }); 
});

来源

2012-03-27 06:01:41 safrazik

提交事件的数据我不知道这是否解释了为什么数据被提交两次，四次，八次.. 。？ – Arjan 2012-03-27 06:04:35

我相信“#preferenceSubmit”是表单的提交按钮。如果是这样，表单将被提交，除非您在click事件函数中返回false，导致它首先通过javascript提交，然后通常提交。还有一点，当按钮被点击几次时，表单有可能被提交几次。要禁用该功能，您可以使用保存提交状态的变量。例如：'form_submitted = true;' – safrazik 2012-03-27 06:16:11

在我在StackOverflow上发布这篇文章之前，我尝试了这种方法，但似乎并没有停止提交文章的翻倍。添加解除绑定似乎解决了我的问题。 – 2012-03-27 13:36:24

jQuery $ .post在每次POST后提交翻倍

回答

相关问题