jQuery的模態登錄註冊

Question

我工作的一個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 
    }); 
}); 

Answer 1

而不是使用.click(function(e){...})方法，使用方法.on('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; 

我不知道這是否是更好的性能明智的，但它看起來更有條理在我看來。