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类。这是可行的，当我查看源代码时，它被放入我想要的标记中。然而，在下面的函数中，我尝试以这个附加的类为目标，并使用一个click事件来触发隐藏模式窗口及其在背景中的覆盖。这不起作用。然而，如果我只是将a class="close"标记复制到我的实际标记中(没有JS)，它在单击时确实会关闭。有什么想法吗？

Answer 1

看起来您需要使用.live()方法。由于包含close类的锚点仅在click发生在modal-links锚点之后创建，因此jQuery不能在document.ready事件中将其连接起来。

编辑、更正：.live方法通过将事件附加到DOM树的根来解决此问题，该事件检查目标元素是否与给定的选择器匹配，然后执行适当的函数。

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

Answer 2

您需要在创建close链接时添加单击处理程序，或者将单击处理程序委托为live单击函数。

发生的情况是，您的$('.close').click(...选择器没有选择任何元素，因为关闭链接还不存在。

编辑以添加：

修复方法是将其更改为$('.close').live('click', function...

元素是异步追加的。