1

我在 jquery 对话框中有一个表单，它没有提交按钮。相反，它是通过单击确定对话框按钮提交的。

因此，当单击“确定”时，会发生这种情况：

var data = $('#form').serialize();
$.post('page.php',data)
  .success( function(result) {

  // result might be description of an error or other problem, then I display error
  ...
  // or ok, then I hide form and change OK button, so now it closes the dialog
  ...
  myDialog.dialog( "option", "buttons", [{ text: ok, click: function() { $(this).dialog("close"); } }] );    

 });

它工作正常。表单的数据是行，它们随后显示在页面的表格中。但是我被报告了好几次，那个用户提交了 N 行并获得了 3xN 新行。所以看起来她在 OK 点击功能改变之前意外地发送了 3 次表单。

我不明白这怎么可能发生。我已经尝试了很多双击或三次单击确定按钮，结果是

  • 数据发送一次
  • 表格没有隐藏
  • 即使表单没有隐藏，单击确定后对话框关闭并且没有再次发送

所以我需要你的建议。我可以做些什么来防止她再次发送相同的表格多次？

4

2 回答 2

1

我建议您在单击一次后从按钮中取消单击事件侦听器的绑定。这可能只是一个简单的解决方案，但我认为它会正常工作。

$('#submitButton').click(function(){

    $(this).unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error
        ...
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
});

编辑

如果要在表单结果无效的情况下重新绑定点击功能：

$('#submitButton').click(function(){
    submitForm();
});

function submitForm();    
    $('#submitButton').unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error

        // if result invalid rebind the click event
        if(resultInvalid){
            $('#submitButton').click(function(){
                submitForm();
            });
        }
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
}
于 2012-06-15T08:59:28.447 回答
1

您可以使用 one() 代替。

$("#submitButton").one("click", function() {
  //ajax code here
});
于 2012-06-15T09:28:42.270 回答