我正在尝试创建一个用于登录和注册的Jquery模式窗口。当点击页面上的css触发器时，模式窗口会通过ajax动态地注入到页面的主体中。模式窗口打开时显示的默认表单是登录表单。此时，一切正常（表单验证、ajax提交等）。无论将哪种形式设置为默认形式，脚本都能正常工作。
如果用户还没有帐户，他/她可以点击一个链接来显示注册表格。此时，登录表格将淡出，注册表格将淡出。
然而，当我切换到注册表单时，jquery并没有按照plMShowRegBtn和plMShowLoginBtn点击事件中脚本的指示重新定义plActiveForm变量。如果我将注册表单设置为默认表单，那么一切都很好，直到我切换到登录表单，这时我遇到了同样的问题——jquery只是不在表单上执行——但所有其他jquery都很好（例如关闭模式窗口并将其从标记中删除）。
似乎一旦加载了jquery并为plActiveForm变量定义了值，它就不允许我重新定义它了。这个变量保存了当前表单的ID，并在整个代码中使用。
我尝试过使用带有live（）和on（）函数的plMShowRegBtn和plMShowLoginBtn点击事件，但没有成功。
这里没有显示html部分，但它非常简单。一个div容器，包含两个表单——一个用于登录，一个用于注册，还有两个用于切换显示的表单的输入按钮。这两种形式都是css显示：默认情况下为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
});
});
听起来像是范围问题。尝试将您的"属性"decarlation从ajax的成功中转移到插件的主体中。例如：
$.fn.plMlogin = function (options) {
// declare private properties here
var plActiveForm, plMLoginFrm; // etc.
在ajax成功函数中，设置属性，而不使用var:使其成为本地属性
plMLoginFrm = $('#pl_frmMlogin');
plActiveForm = plMLoginFrm;
我已经通过创建一个单独的插件来解决这个问题，该插件处理模态窗口并加载发送给它的文件-非常紧凑，也是页面中唯一需要包含的引用。表单有自己的插件来处理所有的验证和其他功能。表单及其相关的js是通过模态插件触发动作注入页面的，这使得整个操作几乎没有重量。所有内容都是动态添加然后删除的。。。。