jquery ui 内存泄漏和视频标签

Question

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

我也在这里创建它用于测试目的：http://jsfiddle.net/2P8Eh/

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

Answer 1

Id 必须是唯一的。

您添加具有相同 id 的元素。

---

ID 是唯一的，因此当浏览器找到具有该 ID 的第一个元素时，它会向该元素添加样式，而其余元素将被忽略。由于 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