3

我正在尝试为登录和注册创建一个 Jquery 模式窗口。当单击页面上的 css 触发器时，模态窗口通过 ajax 动态注入到页面主体中。模式窗口打开时显示的默认表单是登录表单。此时一切都按预期工作（表单验证、ajax 提交等）。无论哪种形式设置为默认值，该脚本都可以正常工作。

如果用户还没有帐户，他/她可以单击链接以显示注册表单。此时登录表单淡出，注册表单淡入。

但是，当我切换到注册表单时，jquery 不会按照 plMShowRegBtn 和 plMShowLoginBtn 单击事件中的脚本指示重新定义 plActiveForm 变量。如果我将注册表单设置为默认表单，那么一切正常，直到我切换到登录表单，此时我遇到同样的问题 - jquery 只是不在表单上执行 - 但所有其他 jquery 工作正常（例如关闭模态窗口并将其从标记中删除）。

似乎一旦加载了 jquery 并且为 plActiveForm 变量定义了值，它就不会让我重新定义它。此变量保存当前表单的 ID，并在整个代码中使用。

我尝试使用带有 live() 和 on() 函数的 plMShowRegBtn 和 plMShowLoginBtn 点击事件无济于事。

此处未显示 html 部分，但它非常简单。一个带有两种表单的 div 容器——一种用于登录，一种用于注册，还有两个用于切换显示的表单的输入按钮。默认情况下，这两种形式都是 css display:none。

任何帮助，将不胜感激。谢谢！

我的插件如下图所示：

// -----------------------------------------------
// JQUERY - FOR MODAL LOGIN + REGISTRATION FORM
// -----------------------------------------------
(function ($) {
$.fn.plMlogin = function (options) {

    // -----------------------------------------------
    // DEFAULTS AND OPTIONS
    // -----------------------------------------------
    var defaults = {
        plTooltip: true,
        plResetButton: true,
        plBubbleResponse: true
    };
    var settings = $.extend({}, defaults, options);

    // -----------------------------------------------
    // SHOW MODAL WINDOW ON CLICK
    // -----------------------------------------------
    $('.pl-m-trigger').click(function(e) {
        e.preventDefault();

        // -> append container into body
        $('body').append('<div class="pl-m-container">');

        // -> load modal forms into container
        $.ajax({
            url: 'pl-module/public/modal-login-html.php',
            dataType: 'html',
            timeout: 10000, // 10 seconds
            success: function(html) {

                // -----------------------------------------------
                // -> LOAD FORMS INTO CONTAINER
                // -----------------------------------------------
                $(".pl-m-container").html(html);

                // -----------------------------------------------
                // PROPERTIES
                // -----------------------------------------------
                var plMContainer = $('.pl-m-container'),
                    plMWrap = $('.pl-m'),
                    plMOverlay = $('.pl-m-overlay'),
                    plMLoginFrm = $('#pl_frmMlogin'),
                    plMRegFrm = $('#pl_frmMRegister'),
                    plMLoading = $('.pl-loading'),
                    plMCloseBtn = $('.pl-m-close'),
                    plMShowRegBtn = $('#pl_showRegForm'),
                    plMShowLoginBtn = $('#pl_showLoginForm'),
                    plMLoginSubmitUrl = 'pl-module/public/login.php',
                    plMRegisterSubmitUrl = 'pl-module/public/register.php',
                    plActiveForm = plMLoginFrm,
                    plSubmitUrl = plMLoginSubmitUrl;

                // -----------------------------------------------
                // SHOW MODAL WINDOW AND DEFAULT FORM
                // -----------------------------------------------
                $(plMWrap).fadeIn('fast');
                $(plMOverlay).fadeIn('fast');
                $(plActiveForm).fadeIn('fast');

                // -----------------------------------------------
                // CLOSE MODAL WINDOW ON BTN CLICK
                // -----------------------------------------------
                $(plMCloseBtn).click(function(e) {
                    e.preventDefault();
                    $(plMWrap).fadeOut('fast', function() {
                        $(plMOverlay).fadeOut('fast', function() {
                            $(plMContainer).remove();
                        });
                    });
                });

                // -----------------------------------------------
                // CLOSE MODAL WINDOW ON OVERLAY CLICK
                // -----------------------------------------------
                $(plMOverlay).click(function() {
                    $(plMWrap).fadeOut('fast', function() {
                        $(this).fadeOut('fast', function() {
                            $(plMContainer).remove();
                        });
                    });
                });

                // -----------------------------------------------
                // SWITCH TO REGISTRATION FORM
                // -----------------------------------------------
                $(plMShowRegBtn).click(function(e) {
                    e.preventDefault();
                    plResetForm();
                    $(plMLoginFrm).slideUp('fast', function() {
                        $(plMRegFrm).slideDown('fast', function(){
                            // set active form to registration
                            plActiveForm = plMRegFrm;
                            plSubmitUrl = plMRegisterSubmitUrl;
                        });
                    });
                });

                // -----------------------------------------------
                // SWITCH TO LOGIN FORM
                // -----------------------------------------------
                $(plMShowLoginBtn).click(function(e) {
                    e.preventDefault();
                    plResetForm();
                    $(plMRegFrm).slideUp('fast', function() {
                        $(plMLoginFrm).slideDown('fast', function(){
                            // set active form to login
                            plActiveForm = plMLoginFrm;
                            plSubmitUrl = plMLoginSubmitUrl;
                        });
                    });
                });

                // -----------------------------------------------
                // RESPONSE MESSAGES
                // -----------------------------------------------
                function plResponse(plMsg, plShowHide) {
                    var plResponse = $('.pl-response', plActiveForm);
                    if (plShowHide === true) {
                        $(plResponse).fadeIn('slow').html(plMsg);
                    } else if (plShowHide === false) {
                        $(plResponse).fadeOut('slow');
                    }
                }

                // -----------------------------------------------
                // RESET FORM BUTTON CLICK
                // -----------------------------------------------
                if (settings.plResetButton) {
                    var plResetBtn = $('.pl-reset-btn', plActiveForm);

                    $(plResetBtn).click(function (e) {
                        e.preventDefault();
                        plResetForm();
                    });
                }

                // -----------------------------------------------
                // RESET FORM FUNCTION
                // -----------------------------------------------
                function plResetForm() {
                    $('.pl-cust-response', plActiveForm).remove();
                    $('.pl-error', plActiveForm).removeClass('pl-error');
                    plResponse('', false);
                    plResetBtn.hide();
                    $(plActiveForm)[0].reset();
                }

                // -----------------------------------------------
                // FORM VALIDATION
                // -----------------------------------------------
                function plValidate() {
                    // remove custom errors if visible
                    $('.pl-cust-response', plActiveForm).remove();

                    // -----------------------------------------------
                    // CHECK - EMPTY REQUIRED FIELDS
                    // -----------------------------------------------
                    $(plActiveForm).find('.pl-required').each(function () {
                        var plEmptyCheck = $.trim($(this).val());
                        if (plEmptyCheck.length == 0) {
                            plResponse(PLLANG.MSG_03, true);
                            if (settings.plBubbleResponse) {
                                $(this).parent().append('<span class="pl-cust-response">' + PLLANG.MSG_04 + '</span>');
                                $('.pl-cust-response').fadeIn('slow');
                            }
                            $(this).addClass('pl-error');
                        } else {
                            $(this).removeClass('pl-error');
                        }
                    });

                    // -----------------------------------------------
                    // IF ERROR(S) FOUND
                    // -----------------------------------------------
                    var $errors = $('.pl-error', plActiveForm);
                    if ($errors.length > 0) {
                        if (settings.plResetButton) {
                            plResetBtn.show();
                        }
                        return false;
                    } else {
                        plResponse('', false);
                        return true;
                    }
                }

                // -----------------------------------------------
                // FORM SUBMIT
                // -----------------------------------------------
                plActiveForm.submit(function (e) {
                    e.preventDefault();

                    // if validation is ok
                    if (plValidate() === true) {
                        var plFormData = $(this).serialize();
                        plAjaxSubmit(plFormData);
                        $(plMLoading).show();
                    } else {
                        return false;
                    }
                });

                // -----------------------------------------------
                // AJAX SUBMIT FUNCTION
                // -----------------------------------------------
                function plAjaxSubmit(plFormData) {
                    $.ajax({
                        type: 'POST',
                        url: plSubmitUrl,
                        data: plFormData,
                        dataType: 'json',
                        cache: false,
                        timeout: 20000,
                        success: function (data) {
                            $.each(data, function(key, value) {
                                if (value.error == true) {
                                    // hide loading image
                                    $(plMLoading).hide();

                                    plResponse(value.msg, true);

                                    // show reset button
                                    if (settings.plResetButton) {
                                        plResetBtn.show();
                                    }
                                } else if (value.error == false) {
                                    // reset form
                                    plResetForm();

                                    // hide loading image
                                    $(plMLoading).hide();

                                    // display success message
                                    plResponse(value.msg, true);
                                }
                            });
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            plResponse(PLLANG.MSG_06, true);

                            // hide loading image
                            $(plMLoading).hide();
                        },
                        complete: function (XMLHttpRequest, status) {
                            // hide loading image
                            $(plMLoading).hide();
                        }
                    });
                }
            }
        });
    });
};
})(jQuery);

// -----------------------------------------------
// INSTANTIATE MODAL LOGIN
// -----------------------------------------------
$(document).ready(function() {
    $('.pl-m').plMlogin({
        plTooltip : true,
        plResetButton : true,
        plBubbleResponse : true
    });
});
4

2 回答 2

0

听起来像一个范围问题。尝试将您的“属性”声明从 ajax 成功中移到插件的主体中。举个例子：

$.fn.plMlogin = function (options) {
    // declare private properties here
    var plActiveForm, plMLoginFrm; // etc.

并在 ajax 成功函数中，设置属性而不使它们成为本地var：

plMLoginFrm = $('#pl_frmMlogin');
plActiveForm = plMLoginFrm;
于 2012-09-09T05:56:21.730 回答
0

我已经通过创建一个单独的插件来处理模式窗口并加载发送给它的文件来解决这个问题 - 非常紧凑并且是唯一需要包含在页面中的参考。表单有自己的插件来处理所有的验证和其他功能。通过模态插件触发动作将表单及其相关js注入页面，使整个操作几乎没有重量。一切都是动态添加然后删除....

于 2012-09-14T00:20:00.080 回答