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

Question

更新代码 - 工作

(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）中被重复（例如密码重置、主题设置、用户创建），所以我决定创建一个能够扩展（如果需要更改）但应用默认值的函数可能更有益。

see edit revisions for older code

Answer 1

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

您正在使用名称 mboptions

进行设置

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

但随后尝试使用 options

访问它

options.beforeSend($this, e);

当您尝试绑定提交事件时，您并没有从选项对象访问事件名称。所以而不是

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

我觉得

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

更具可读性（如果需要，您也可以稍后删除与 this.off(mboptions.mb_form_type) 的绑定；）

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

Trying to create reusable custom ajax form plugin

javascript

jquery

function

jquery-plugins