jQuery .append（）

Question

這可能是一個不雅的做法，但是...我正在用jQuery製作自己的lightbox窗口腳本 - 這是爲了學習目的而不是其他任何事情。

使用這個腳本：

$(document).ready(function() { 
    $(".popout").hide(); 
    $(".modal-links a").each(function(i){ 
     $(this).click(function(){ 
     $("body").append('<div class="overlay"></div>') 
     $(".popout").append('<a class="close" href="#">Close</a>') 
     var modal = $(".popout").eq(i), 
      modalWidth = modal.width(), 
      modalHeight = modal.height(); 
     modal.css({ 
      "width":modalWidth, 
      "height":modalHeight, 
      "margin-left":-(modalWidth/2)}) 
      .show().siblings(".popout").hide(); 
     }); 
    }); 
    $(".close").click(function(){ 
     $(".popout").hide(); 
     $(".overlay").hide(); 
    }); 
}); 

我能夠追加一類.close的錨鏈接。這是有效的，當我查看源代碼時，它會按照我的意願放入標記中。但是，在下面的函數中，我嘗試定位這個附加類，並使用一個單擊事件來觸發模態窗口的隱藏，並在背景中覆蓋。這不起作用。然而，如果我只是將a class="close"標記複製到我的實際標記中（沒有JS），它會在點擊時關閉。有任何想法嗎？

Answer 1

看起來您需要使用.live()方法。由於close類的錨點僅在modal-links錨點發生click之後纔會創建，因此jQuery無法在document.ready事件中對其進行連線。

編輯，更正： .live方法通過將一個事件附加到DOM樹的根，以檢查目標元素是否匹配給定的選擇器，然後執行相應的函數來解決此問題。

$('.close').live('click', function() { 
     $(".popout").hide(); 
     $(".overlay").hide(); 
}); 

Answer 2

您需要可以添加自己的點擊處理程序時創建的密切聯繫，或委託單擊處理作爲live點擊功能。

發生了什麼是您的$('.close').click(...選擇器沒有選擇任何元素，因爲關閉鏈接還不存在。

EDIT添加：

甲解決將是它更改爲$('.close').live('click', function...

元素是異步追加。