jQuery对话框多次提交表格

由于某种原因，我第一次提交表单时，它可以正常工作。但是，当我第二次提交表单时（无需重新加载页面），它将提交表单两次。当我第三次提交时，我收到三份意见书 - 等等。jQuery对话框多次提交表格

我不知道我在做什么错。（和长期职位对不起）

我的单击事件：

$(document).ready(function() { 

    $('#new-post').click(function(event) { 

     event.preventDefault(); 

     $(this).newPost({ 
      title : 'New Post Form', 
      type : '1' 
     }); 

    }); 

});

我的插件：

(function($) { 

    $.fn.newPost = function(options) { 

     var defaults = { 
      container : '#post-popup', 
      title  : 'New Post', 
      type  : '' 
     }; 

     var settings = $.extend({}, defaults, options); 

     $(settings.container).dialog({ 
      autoOpen : false, 
      width  : 765, 
      modal  : false, 
      resizable : false, 
      title  : settings.title, 
      close  : function (event, ui) { $(this).dialog('destroy'); } 
     }).dialog('open'); 

     $(settings.container).submit(function() { 

      event.preventDefault(); 

      var form = $(settings.container); 

      var formData = { 
       postTitle : $('#title').val(), 
       postBody : $('#body').val(), 
       postType : settings.type 
      }; 

      $.ajax({ 
       type : 'POST', 
       url  : form.attr('action'), 
       data : formData, 
       success : function(data) { 
        $(form).get(0).reset(); 
        $(form).dialog('close').dialog('destroy'); 
       }, 
       error : function() { 
       } 
      }); 

      return false; 

     }); 

    }; 

})(jQuery);

来源

2011-02-18 Booski

每个对话追加都没有被替换，如果你查看生成的源代码，你会看到这个，你想添加.remove（）关闭 – 2011-02-18 02:00:39

因为每次单击按钮时，会附加另一个提交表单。在我看来，你正在努力实现以下几点：

$(document).ready(function() { 

    $('#new-post').click(function(event) { 

     $(this).newPost({ 
      title : 'New Post Form', 
      type : '1' 
     }); 

     return false; 

    }); 

}); 


(function($) { 

    $.fn.newPost = function(options) { 

     var defaults = { 
      container : '#post-popup', 
      title  : 'New Post', 
      type  : '' 
     }; 

     var settings = $.extend({}, defaults, options); 

     $(settings.container).dialog({ 
      autoOpen : false, 
      width  : 765, 
      modal  : false, 
      resizable : false, 
      title  : settings.title, 
      close  : function (event, ui) { $(this).dialog('destroy'); } 
     }).dialog('open'); 

     event.preventDefault(); 

     var form = $(settings.container); 

     var formData = { 
      postTitle : $('#title').val(), 
      postBody : $('#body').val(), 
      postType : settings.type 
     }; 

     $.ajax({ 
      type : 'POST', 
      url  : form.attr('action'), 
      data : formData, 
      success : function(data) { 
       $(form).get(0).reset(); 
       $(form).dialog('close').dialog('destroy'); 
      }, 
      error : function() { 
      } 
     }); 

    }; 

})(jQuery);

我工作的每一个的#new-post按钮被点击时要组装某些数据和发送Ajax请求创建一个新的假设后 - 然后重置表单。罪魁祸首是$(settings.container).submit(function() {你不需要那个人。每次点击按钮时，它都会分配另一个事件，这就是为什么您看到的按钮点击次数与Ajax请求数量一样多。

来源

2011-02-18 01:53:54

这样做！感谢一群人 – Booski

您呼叫newpost您注册另一个事件处理程序.submit

第1次每次您注册一个提交处理程序

$(settings.container).submit(function() { 
    event.preventDefault(); 
    //...... 
});

您再次单击该按钮并注册另一个处理程序提交

$(settings.container).submit(function() { 
    event.preventDefault(); 
    //...... 
});

单击按钮越多，提交处理程序就会附加到您的表单中。

来源

2011-02-18 01:57:14

+1感谢您的帮助，您是对的 – Booski

jQuery对话框多次提交表格

回答

相关问题