Question

我正在尝试创建自己的叠加层，因为叠加插件上发生了完全相同的错误。我要做的是，如果有人点击了类overlay的元素，则会打开一个叠加层，并在叠加层中加载href属性的内容。当这个叠加层关闭时，它应该被删除（在这里使用remove()），但它不是。相反，如果我打开另一个（甚至相同的）叠加层，它会显示旧的叠加层。我该如何防止这种情况？

// Overlay for editing
$(".st_overlay[href]").click(function(e){
var url = $(this).attr('href');
$("body").append('<div display="none" class="st_modal"><div class="inner"></div><span class="close">x</span></div>');
$(".st_modal .inner").load(url);
$(".st_modal").fadeIn(500);
});

// Overlay functions
$(".st_modal .close").click(function(e){
$(".st_modal").fadeOut(500);
setTimeout( function(){
$(".st_modal").remove();
}, 500);
});

Answer 1

您可以在淡出完成后使用回调功能。

$(".st_modal .close").click(function(e){
 $(".st_modal").fadeOut(500, function() {
  $(this).remove();
 });
});

快乐编码：）

Answer 2

因为您只附加了一次覆盖关闭回调，但动态注入了叠加层，并且在注入后您没有附加它们。所以要么你必须在注射之后附上它们 -

// Overlay for editing
$(".st_overlay[href]").click(function(e){
var url = $(this).attr('href');
$("body").append('<div display="none" class="st_modal"><div class="inner"></div><span class="close">x</span></div>');
$(".st_modal .inner").load(url);
$(".st_modal").fadeIn(500, function(){
        // Overlay functions
        $(".st_modal .close").click(function(e){
        $(".st_modal").fadeOut(500);
        setTimeout( function(){
         $(".st_modal").remove();
        }, 500);
      });
    });
});

// Overlay functions
$(".st_modal .close").click(function(e){
$(".st_modal").fadeOut(500);
setTimeout( function(){
$(".st_modal").remove();
}, 500);
});

或使用事件委托，以便动态添加的叠加层获取事件 -

// Overlay functions
    $('body').delegate(".st_modal .close", 'click', function(e){
    $(".st_modal").fadeOut(500);
    setTimeout( function(){
    $(".st_modal").remove();
    }, 500);
    });

为什么Jquery remove（）删除叠加？

2 个答案: