JQuery клонирование и удаление div не добавляет div обратно

Question

Я нашел фрагмент кода, который помог мне с моей первоначальной проблемой: у меня есть раздел с вкладками, в котором есть видео. Когда вы воспроизводите видео, затем выбираете другую вкладку, видео продолжает воспроизводиться в фоновом режиме. Общая проблема, я думаю:)

В любом случае я нашел какой-то код, который, кажется, работал, но, видимо, я сделал что-то не так. Это код:

// stop video playback when div is hidden
$('.contextual-help-tabs li').click(function() {
    var test = $('.contextual-help-tabs-wrap div.active').attr('id'); // gets previously active div ID
    var clone = $('#'+test).clone(true);                               // clones the previously active div
    $('#'+test).remove();                                              // removes the previously active div
    $('#'+test+'-holder').html(clone);                                 // puts it back like new
});

Проблема заключается в следующем: test действительно, возвращает правильный div. Он захватывает идентификатор div вкладки, которая была ранее открыта до текущей и активной, одной. Это работает удовольствие. это также удаляет div просто отлично.

Тем не менее, он не помещает его обратно. Когда я выхожу в "предупреждение", чтобы увидеть, что происходит, он удаляет div, но никогда не возвращает его (он возвращается как "неопределенный"). Так что я не знаю, если clone просто не клонирует, или если $('#'+test+'-holder').html(clone); просто не работает.

Как примечание, я также попытался использовать эту альтернативу:

// stop video playback when div is hidden
$('.contextual-help-tabs li').click(function() {
    var test = $('.contextual-help-tabs-wrap div.active').attr('id'); // gets previously active div ID
    var clone = $('#'+test).clone(true);                               // clones the previously active div
    $('#'+test).replaceWith(clone);                                // replaces the previously active div with the "refreshed" contents of the div
    });

и это на самом деле работало хорошо - это было замена контента на контент (воспроизведение видео остановлено), НО - если у меня есть video тег в контенте (т.е. воспроизведение видео HTML5), то по какой-то причине видео теряется. Возвращенный HTML-код является абсолютно правильным, но по причине, которую я не могу понять, видео больше не распознается и не будет ничего воспроизводить. он действует так, как будто видео отсутствует, или это неверный путь. (Я предполагаю, что это как-то связано с тем, что DOM больше не распознает это?)

Кто-нибудь знает, как я могу исправить любую версию кода? Потому что я просто не вижу, что здесь происходит.

Спасибо!

ETA: в качестве примечания, если я использую функцию replaceWith(), и я перехожу на вкладку с видео HTML5 и воспроизводю его, затем меняю вкладки, когда я возвращаюсь на вкладку с видео в нем, видео все еще там, работает нормально, и если вы нажмете "играть", он будет воспроизводиться с того места, где вы поменялись местами на вкладке (вместо того, чтобы начать сначала).

Если я перейду на вкладку с видео и перейду на другую вкладку перед воспроизведением видео HTML5, ТО вернусь на вкладку с видео HTML5, затем видео исчезнет. Это действительно странно.

Если это помогает, пока это происходит только в Google Chrome. Я еще не проверил, существует ли проблема в других браузерах.

Answer 1

Вы можете попробовать использовать detach(). найти его здесь http://api.jquery.com/detach/ Что он делает, так это то, что он фактически удаляет нужный узел из дерева DOM, и вы можете назначить ему некоторую переменную, подобную этой

var video = $('#videoDivId').detach(); // you can also declare this var global then use it in some other function
$('#someDifferentDiv').append(video);

У меня была такая же проблема, это работало на меня

Answer 2

Нельзя использовать .html() метод с объектом jQuery - нужно использовать строку.

Редактировать: Кстати, где вы нашли .html(clone) код?