Question

我遇到了一些奇怪的行为。当我有一个带有视频标签的页面并且之后动态创建一个jquery ui元素时，chrome-dev-tools会在时间线视图中向我显示内存泄漏，每次我创建（并在之后销毁元素）。它s tested with ui - button and ui - dialog so far. when i remove the source of the video tag, the leak doesn出现了。有没有人有想法？非常感谢。

我也是为了测试目的在这里创建的：http://jsfiddle.net/2P8Eh/

非常感谢您的回答。我刚刚意识到使用jsfiddle进行测试会在测试lokal时给出不同的结果（我猜它s because of the iframe, where they running the code). anyway i considerd your solutions, but they don解决了内存泄漏问题。我附加了一个图像，我在其中创建，销毁，创建，销毁...元素然后在chrome-dev中放入gc按钮：

Answer 1

ID必须是唯一的。

添加具有相同ID的元素。

<小时/> Id是唯一的，因此当浏览器找到具有该id的第一个元素时，它会向该元素添加样式，并忽略rest元素。因为id必须是唯一的，所以它永远不会寻找具有相同id的另一个元素。

<小时/> 阅读Two HTML elements with same id attribute: How bad is it really

<小时/> OP的评论

后更新

Working Fiddle

$(function () {
    $("#btn-destroy").prop('disabled', true);//disable destroy
    $("#btn-create").click(function () {
        $("body").append("<div id='new-button'>test</div>");
        $(this).prop('disabled', true);// disable create button
        $("#btn-destroy").prop('disabled', false);// enable destroy button
        $("#new-button").button();
    });
    $("#btn-destroy").click(function () {
        $("#new-button").button("destroy").remove();
        $(this).prop('disabled', true);// disable destroy button
        $("#btn-create").prop('disabled', false);// enable create button
    });
});

.prop()

Answer 2

如果要添加多个元素并一次删除它们，则使用class而不是ID。相同的命令将应用于具有该类的所有元素。

(function() {   
            $( "#btn-create" ).click(function() {
                $( "body" ).append("<div class='new-button'>test</div>");
                buttons.push(buttons.pull()+1)
                $( ".new-button" ).button();
            });
            $( "#btn-destroy" ).click(function() {
                $( ".new-button" ).button("destroy").remove();
            });
        });

如果要添加元素并按其创建的相反顺序删除它们，请跟踪数组中标识的唯一ID。请注意，元素ID在整个DOM中必须是唯一的。如果两个元素具有相同的ID，那么很可能JQuery只会找到第一个，并且您可能会遇到意外行为。

$(function() {
    var buttons_id = [1]; 
            $( "#btn-create" ).click(function() {  
                buttons_id.push(Number(buttons_id.length-1)+1);
                var id =  buttons_id[buttons_id.length-1];           
                console.log("first id="+id);
                var id_str = "new-button"+id;           
                $( "body" ).append("<div class='"+id_str+"'>test</div>");              
                $( "."+id_str).button();
            });
            $( "#btn-destroy" ).click(function() {
                var id =   buttons_id.pop(); 
                console.log("poped id = "+id);
                $( ".new-button"+id ).button("destroy").remove();
            });
        });

DEMO

jquery ui内存泄漏和视频标签

2 个答案: