jQuery Dialog отправляет форму несколько раз

Question

Почему-то при первой отправке формы она работает. Однако, когда я отправляю форму второй раз (без перезагрузки страницы), она отправляет форму дважды. Когда я отправляю в третий раз, я получаю три заявки - и так далее.

Я не знаю, что я делаю не так. (и простите за длинный пост)

Событие моего клика:

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

Answer 1

Потому что каждый раз, когда вы нажимаете кнопку, она присоединяет к вашей форме еще одну отправку.Мне кажется, что вы пытаетесь добиться следующего:

$(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, сколько раз была нажата кнопка.

Answer 2

Каждый раз, когда вы вызываете newpost, вы регистрируете другой обработчик событий для .submit

Первый раз, когда вы регистрируете обработчик отправки

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

Вы нажимаете кнопку еще раз и регистрируете другой обработчик для отправки

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

Чем больше вы нажимаете кнопку, тем больше обработчик отправки прикрепляется к вашей форме.