Javascript 一个div已经被一个js代码删除了，但是它会在chrome中在页面上停留很长时间

在此页面中：
如果我没有滚动页面，没问题！太好了，一切都好
但是当我滚动页面时，例如，转到此处：
当我使用Chrome（Chrome 31.0.1650.63 m）浏览此页面时（不要忘记锚定

#51

）。
如果我点击按钮（'提交试卷') ,页面将弹出一个方框div，没关系。

但当我单击“X”时，事实上，我已经删除了背景div，但它将在页面上保留很长时间。
我要说的是，

…

和

。

被添加了。所以我使用了.live（）

有时背景div会在2分钟后消失。 我已尝试将jquery更新为

//code.jquery.com/jquery-1.10.2.min.js

并更新代码：

$(document).on('click','.popclose',function(){
    $("#popbox").fadeOut(100,function(){
        $("#popbox").remove();
        $("#popbackground").remove();
    });
})

它也不起作用。

---

是的，这很好，你可以手动给淡出时间，而不是慢。试试这个：

$(".popclose").on('click',function(){
    $("#popbox").fadeOut(100,function(){
        $("#popbox").remove();
        $("#popbackground").remove();
    });
})

---

我认为这与当前发布的代码片段无关。我认为根本原因是将jquery、纯javascript和html作为字符串进行混合和匹配的问题。请看以下部分：

box:function(title,content){
    //box样式均在box.css里面
    var popbackground= '<div class="popbackground" id="popbackground"></div>';
    $(popbackground).appendTo(document.body);
    var boxdiv = '<div class="popbox" id="popbox">\
        <div class="innerpopbox">\
            <div class="title">\
                <div id="poptitle"></div>\
                <a class="btn-close popclose" href="javascript:void(0);">×</a>\
            </div>\
            <div class="content" id="popcontent"></div>\
        </div>\
    </div>';

    $(boxdiv).appendTo(document.body);
    //MORE OF YOUR CODE HERE
}

框：功能（标题、内容）{
//盒子样式均在box.css里面
var popbackground=''；
$（popbackground）.appendTo（document.body）；
var-boxdiv=\
\
\
\
\
\
\
\
';
$（boxdiv）.appendTo（document.body）；
//这里有更多的代码
}

并将其更改为：

box:function(title,content){
  var body = $('body'),
  popbackground = $('<div class="popbackground" id="popbackground"/>');

  var boxdiv = $('<div class="popbox" id="popbox"/>')
            .append($('<div class="innerpopbox"/>')
              .append($('<div class="title" />')
                .append($('<a class="btn-close popclose" href="#"/>').text('x'))
                .append($('<div id="poptitle"/>'))
            )
            .append($('<div class="content" id="popcontent" />')));

  popbackground.appendTo(body);
  boxdiv.appendTo(body);
  //MORE OF YOUR CODE HERE
}

框：功能（标题、内容）{
变量body=$（'body'），
popbackground=$（''）；
变量boxdiv=$（''）
.append（$（''）
.append（$（''）
.append（$（''）.text（'x'））
.附加（$（''）
)
。附加（$（''）；
popbackground.appendTo（body）；
boxdiv.附件（主体）；
//这里有更多的代码
}

我很快会来写一点，但基本上，jquery没有意识到您在正文中附加的是一个html元素，将来可能需要更改。就它而言，它只是一些文本字符串，被附加到正文中，由浏览器解释。但它不是有用的ly由jQuery解释。这意味着以后尝试使用它会出现问题

tl；dr：当使用jquery创建元素时-按如下方式操作：

var foo = $('<div />').addClass('bar').attr('id', 'bam');

var foo=$（''）.addClass（'bar'）.attr（'id'，'bam'）；

这将确保jQuery能够与它正确地进行互操作

注意：这在vanilla javascript中是[某种程度上]相同的，不仅仅是：

document.body.appendChild('<div id="foo>Heres some text</div>"');

---

document.body.appendChild（'只是一个想法-将
.live
替换为
.on
。请告诉我这是否解决了问题。
.live
已被弃用。@m59尝试过，但在Chrome中仍然不起作用。在FF中效果很好。@Birrel这是因为您没有包含jQuery:）它工作正常，而你的答案不是解决方案。是的，我注意到我没有包括它-我的不好。你的解决方案工作正常。我在下面提供的答案也工作正常。关于剥皮猫和多种方法。你对有关
live
的建议感到困惑。相信我。将你的代码更改为
$（文档）。继续（'click'、'.popclose'，function（）{
它做你想要的。在FireFox和ChromeOh中测试过，我需要说，
..
被添加了。所以我使用.live（）m59和jonLuci有很好的解决方案，使用
.on（）
而不是
。live（）
我使用
.on（）
而不是
.live（）
，盒子无法关闭。@Birrel你看到页面了吗？没有什么普通的东西会导致他有问题的行为。这可能是由非常糟糕的js或css代码引起的某种小故障。哦，我需要说，
…
被添加了。所以我使用了.live（）奇怪，在chrome开发工具中编辑它时为我修复了它[而且只是仔细检查了一下]。我现在看不到你网站上的实时代码-已经上传了吗？我在我的电脑上测试。很快上传。等一下。太好了！！但是当我关闭弹出框时，锚消失了。页面转到顶部我在等你。我的问题已经解决了，但是当我关闭弹出框时，锚（
\51
）url的返回将消失。因此页面将转到顶部。这是一个不同的问题，因此我不会编辑现有的答案。您需要取消在单击锚定标记[X]时触发的默认操作。将return false添加到.popclose事件处理程序的末尾。例如：
$（.popclose”）.on（'click'，function（）{$（“#popbox”）.fadeOut（100，function（）{$（“#popbox”）.remove（）；$（“#popbackground”）.remove（）；}）；返回false；；
var foo = $('<div />').addClass('bar').attr('id', 'bam');

document.body.appendChild('<div id="foo>Heres some text</div>"');