Jquery Modal对话框登录和注册

Question

我想创建一个用于登录和注册的Jquery模式窗口。当单击页面上的css触发器时，模式窗口将通过ajax动态注入到页面主体中。模态窗口打开时显示的默认表单是登录表单。此时一切正常（表单验证，ajax提交等）如预期的那样。无论哪种形式被设置为默认，该脚本总能正常工作。

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

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

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

我已经尝试使用live（）和on（）函数的plMShowRegBtn和plMShowLoginBtn单击事件无济于事。

html部分在这里没有显示，但它非常简单。带有两种形式的div容器 - 一个用于登录和一个用于注册，另一个用于切换显示的表单的两个输入按钮。这两种形式都是CSS显示：默认情况下没有。

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

我的插件，如下图所示：

// ----------------------------------------------- 
// 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 
    }); 
}); 

Answer 1

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

Answer 2

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

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

，并在阿贾克斯成功的功能，设置属性，而没有让他们当地有var：

plMLoginFrm = $('#pl_frmMlogin'); 
plActiveForm = plMLoginFrm;