我正在进行jquery模式登录和注册。默认情况下，模态窗口显示登录表单。如果我点击节目注册按钮，它会切换到注册表单。 jqquery代码应该在当前活动（可见）表单上执行，但它似乎只能使用默认表单（登录）。当我切换到注册表单时，代码没有做任何事情，我无法弄清楚原因。没有一个jquery似乎工作。似乎一旦jquery在页面加载时加载，它就不会让我重新定义保存当前表单ID的plActiveForm变量。正如您在代码中看到的那样，此变量始终使用。
任何帮助将不胜感激。谢谢！
我不知道我是否有多大意义，这很难解释。我的插件如下所示：
// -----------------------------------------------
// 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');
var plMWrap = $('.pl-m');
var plMOverlay = $('.pl-m-overlay');
var plMLoginFrm = $('#pl_frmMlogin');
var plMRegFrm = $('#pl_frmMRegister');
var plMLoading = $('.pl-loading');
var plMCloseBtn = $('.pl-m-close');
var plMShowRegBtn = $('#pl_showRegForm');
var plMShowLoginBtn = $('#pl_showLoginForm');
var plMLoginSubmitUrl = 'pl-module/public/login.php';
var plMRegisterSubmitUrl = 'pl-module/public/register.php';
var plActiveForm = plMLoginFrm;
var 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
});
});
答案 0 :(得分：0)
使用.on('click', function(e){...})方法，而不是使用.click(function(e){...})方法。 .on()方法适用于动态修改的HTML，而其他事件方法仅适用于原始HTML。
<小时/> 另外，只是一个建议，您可以声明多个这样的变量：
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;
我不确定它在性能方面是否更好，但在我看来它看起来更有条理。