Javascript 尝试创建可重用的自定义ajax表单插件

更新的代码-正常工作

(function($) {

    $.fn.mbajaxform = function( mbopts ) {

        var mb_form_items       = $(this).find('input, submit, button'),
            mb_form_type        = mb_mbtheme_js[0],
            mb_get_page_slug    = mb_mbtheme_js[1],
            mb_redirect         = mb_mbtheme_js[2],
            mb_redirect_time    = mb_mbtheme_js[3],
            mb_form_disable     = mb_mbtheme_js[4];

        // create the defaults
        let mbdefaults = {
                beforeSend: function( el, beforeSend ) {
                            },

                success:    function( el, success ) {
                            },

                complete:   function( el, complete ) {
                            },

                error:      function( el, error ) {
                            }
        };


        // extend the defaults
        let mboptions = $.extend( {}, mbdefaults, mbopts );

        return this.each( function() {

            // the variable for this
            var $this = $(this);

            function beforesend_callback(e) {
                mboptions.beforeSend( $this, e );
            }

            function success_callback(e) {
                mboptions.success( $this, e );
            }

            function complete_callback(e) {
                mboptions.complete( $this, e );
            }

            function error_callback(e) {
                mboptions.error( $this, e );
            }


            // run the function
            $this.on( mb_form_type, function(mb) {

                // stop the default function of buttons
                mb.preventDefault();

                var mb_ajax_form_data = new FormData( $this[0] );

                // do the ajax
                $.ajax({
                    method:         "POST",
                    data:            mb_ajax_form_data,
                    contentType:    false,
                    processData:    false,
                    beforeSend:     beforesend_callback,
                    success:        success_callback,
                    complete:       complete_callback,
                    error:          error_callback
                });
            });

        });
    };
}( jQuery ));


$("#mbform").mbajaxform();

---

原始问题

这是我第一次尝试创建一个插件，但我遵循了一些教程，希望它能在第一个新手中工作

我有一个AJAX表单，我注意到它在我的网络中的几个子站点（使用Wordpress Multisite）重复出现（例如密码重置、主题设置、用户创建），因此我决定创建一个可以扩展（如果需要更改）但可以应用默认值的函数可能会更有益

有关旧代码，请参见编辑修订

---

乍一看，您可能没有引用正确的选项变量

您正在使用名称

mboptions

 let mboptions = $.extend({}, mbdefaults, mbopts);

但随后尝试使用

选项访问它

options.beforeSend($this, e);

当您试图绑定submit事件时，您没有从options对象访问事件名称。所以不是

$this[mb_form_type](function(mb) {...});

我想

$this.on(mboptions.mb_form_type, function(mb) {...}):

---

更具可读性（您也可以稍后使用

this.off（mbooptions.mb\u form\u type）

删除绑定，如果需要；）

阻止按钮单击的默认操作不会阻止提交表单。您必须侦听表单的submit事件，并阻止其默认操作。@Teemu当我在插件之外运行脚本时，preventDefault工作结果表明我有一些事情导致了问题：1。js文件的位置不正确，2。在另一个默认变量中调用默认变量，一些命名-我已经更新了问题，使其具有工作代码谢谢，在复制和粘贴时没有注意到。仍然无法工作，但控制台中是否出现错误？您需要打开preserve log以查看页面postsNo错误后的消息，据我所知，

之后的任何内容都将返回此。each（function（）{

mb\u ajax\u form\u links变量是在表单提交处理程序中声明的，但是您试图在其他函数中访问它，因此它将超出它们的范围。由于您正在表单中查找交互式元素，我想您可以替换

$（mb_ajax_form_links）

带有

el.find（'input，select，button'）

而且您不想执行ajax参数对象中的函数，只需要引用它们，而不是

beforeSend:beforeSend_callback（），

您需要

beforeSend:beforeSend\u callback，

等等