我正在尝试为登录和注册创建一个 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
});
});