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();
  //......
});

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

jQuery Dialog多次提交表单

2 个答案: