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...

元素是异步追加。