jQuery Dialog submits form multiple times

For some reason the first time I submit the form, it works. However, when I submit the form a second time (without page reload) it submits the form twice. When I submit a third time, I get three submissions - and so on.

I don't know what I'm doing wrong. (and sorry for the long post)

My click event:

$(document).ready(function() {

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

        event.preventDefault();

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

    });

});

My Plugin:

(function($) {

    $.fn.newPost = function(options) {

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

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

        $(settings.container).dialog({
            au开发者_JS百科toOpen  : 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);

Because every time you click your button, it attaches another submit to your form. It seems to me that you are trying to achieve the following:

$(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);

I'm working on the assumption that every time the #new-post button is clicked you want to assemble some data and send an ajax request to create a new post - then reset the form. The culprit was $(settings.container).submit(function() { you dont need that guy. It assigned another event every time you clicked the button which is why you were seeing as many ajax requests as the number of times the button was clicked.

Every time you are calling newpost you are registering another event handler to .submit

1st time you register a submit handler

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

You click the button again and register another handler for submit

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

The more you click the button the more submit handler get attached to your form.