jQuery - append（）在使用empty（）後不能再次工作（）

我想在對話框中顯示註冊/登錄窗體（lightbox樣式），但兩者僅在點擊觸發器超鏈接時顯示一次。點擊一次後，頁面仍會模糊，但對話框不會顯示任何內容。jQuery - append（）在使用empty（）後不能再次工作（）

當省略empty（）函數時，此代碼正常工作，但登錄和註冊表單都顯示在1對話框中。當用戶點擊登錄鏈接時，我只想顯示登錄表單，當用戶點擊登記超鏈接時，我只想顯示登記表格。

請參閱下面的代碼（HTML，CSS，jQuery）。

<html> 
    <head> 
    <style> 

     #lightbox { 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      background:rgba(0,0,0,0.5); 
      display:none; 
     } 

     #invisible_register, #invisible_login { 
      display:none; 
      position:absolute; 
     } 

    </style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     jQuery(document).ready(function($) { 

      $('.trigger_register').click(function(e) { 
       e.preventDefault(); 
       $('#lightbox').empty().append($('#invisible_register')); 
       $('#lightbox').show(); 
       $('#invisible_register').show(); 
      }); 

      $('.trigger_login').click(function(e) { 
       e.preventDefault(); 
       $('#lightbox').empty().append($('#invisible_login')); 
       $('#lightbox').show(); 
       $('#invisible_login').show(); 
      }); 

      //Click anywhere on the page to get rid of lightbox window 
      $("#lightbox").click(function() { 
       $('#lightbox').hide(); 
      }); 

      //Except for the dialog box 
      $(".dialog").click(function(e) { 
       e.stopPropagation(); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 

    <div id="lightbox"></div> 

    <div id="invisible_register"> 
     <div class="container"> 
      <div class="dialog"> 
       <div class="box"> 
        <div class="box_left"> 
         <h1>Register</h1> 
        </div> 
        <div class="box_right"> 
         <div class="error_text"></div> 
        </div> 
        <div class="clear"></div> 
       </div> 
      </div> 
     </div>  
    </div> 

    <div id="invisible_login"> 
     <div class="container"> 
      <div class="dialog"> 
       <div class="box"> 
        <div class="box_left"> 
         <h1>Login</h1> 
        </div> 
        <div class="box_right"> 
         <div class="error_text"></div> 
        </div> 
        <div class="clear"></div> 
       </div> 
      </div> 
     </div>  
    </div> 

    <a href="" class="button trigger_register">Register</a> 
    <a href="" class="button trigger_login">Login</a> 

</body> 
</html>

或參閱本搗鼓這個問題的一個簡單的例子：http://jsfiddle.net/zwprf0yw/

編輯克隆（）函數的效果很好，但是這會導致另一個問題：該對話框被關閉點擊時它。我認爲它阻止了這塊代碼的工作。有什麼建議麼？

 $(".dialog").click(function(e) { 
      e.stopPropagation(); 
      return false; 
     });

來源

2014-09-28 guy1997

你必須.clone()追加它們之前的元素。如果你不這樣做，那麼你致電.empty()永遠消除它們。

Here is the fixed fiddle.

  $('.trigger_register').click(function(e) { 
       e.preventDefault(); 
       $('#lightbox').empty().append($('#invisible_register').clone()); 
       $('#lightbox').show(); 
       $('#invisible_register').show(); 
      }); 

      $('.trigger_login').click(function(e) { 
       e.preventDefault(); 
       $('#lightbox').empty().append($('#invisible_login').clone()); 
       $('#lightbox').show(); 
       $('#invisible_login').show(); 
      });

當你找到一個現有的元素，然後.append()別的地方，它就會從原來的家中帶走。

編輯 —爲了使這個真的工作，事件處理應通過委託來完成：

  //Click anywhere on the page to get rid of lightbox window 
      $(document).on("click", "#lightbox", function() { 
       $('#lightbox').hide(); 
      }); 

      //Except for the dialog box 
      $(document).on("click", ".dialog", function(e) { 
       e.stopPropagation(); 
       return false; 
      });

這樣一來，對於克隆的對話框事件將得到妥善處理。

來源

2014-09-28 21:22:31 Pointy

感謝你的答案。 clone（）函數運行良好，但是這會導致另一個問題：單擊它時，對話框現在會關閉。（看我編輯的問題） – guy1997 2014-09-28 21:49:35

@ guy1997 [這裏是修改過的小提琴。]（http://jsfiddle.net/Lrev6doz/1/）您必須使用委託事件處理才能使其工作。 – Pointy 2014-09-28 22:41:57

.clone()的形式。否則，您將它從A移動到B，從而永久移除不可見的一個，並且當您從Lightbox中移除它時，將永遠從整個HTML中移除它。

$('#lightbox').empty().append($('#invisible_login').clone()); 
(...) 
$('#lightbox').empty().append($('#invisible_register').clone());

來源

2014-09-28 21:22:52

感謝您的回答。 clone（）函數運行良好，但是這會導致另一個問題：單擊它時，對話框現在會關閉。（看我編輯的問題） – guy1997 2014-09-28 21:50:35

只需添加.html()到追加，不表明觸發點擊後invisible_login和invisible_register。

... 
       $('.trigger_register').click(function(e) { 
        e.preventDefault(); 
        $('#lightbox').empty().append($('#invisible_register').html()); 
        $('#lightbox').show(); 
       }); 

       $('.trigger_login').click(function(e) { 
        e.preventDefault(); 
        $('#lightbox').empty().append($('#invisible_login').html()); 
        $('#lightbox').show(); 
       }); 
...

現場演示 - http://jsfiddle.net/zwprf0yw/1/

爲了防止收藏關閉，當你在使用.dialog單擊此事件處理程序：

  //Except for the dialog box 
      $("#lightbox").on('click', '.dialog', function(e) { 
       e.stopPropagation(); 
       return false; 
      });

現場演示 - http://jsfiddle.net/zwprf0yw/2/

來源

2014-09-28 21:25:40 MaximOrlovsky

感謝您的回答。 html（）函數運行良好，但是這會導致另一個問題：單擊它時，對話框現在會關閉。（見我編輯的問題） – guy1997 2014-09-28 21:49:10

jQuery - append（）在使用empty（）後不能再次工作（）

回答

相關問題