jQuery cloning and removing div doesn't add div back in

Question

I found a piece of code that helped me with my original issue: I have a section of tabbed content where some content has video in it. When you play the video, then choose another tab, the video continues playing the in the background. Common issue I guess :)

In any case, I found some code that seemed to work, but apparently I've done something wrong. This is the code:

// 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
});

The issue is this: test does, indeed, return the correct div. It grabs the div ID of the tab that was previously opened before the current, and active, one. That works a treat. it's also removing the div just fine.

However, it's not putting it back in. When I pop in an "alert" to see what's happening, it's removing the div, but never putting it back (it comes back as "undefined"). So I don't know if clone just isn't cloning, or if the $('#'+test+'-holder').html(clone); just isn't working.

As a side note, I also tried using this alternative:

// 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
    });

and that was actually working nicely - it was replacing the content with the content (video playback stopped) BUT - if I have a video tag in the content (i.e. HTML5 video playback), then, for some reason, the video is lost. The returned HTML is exactly correct, but for a reason I can't understand, the video is no longer recognized, and will not play anything. it acts like the video isn't there at all, or it's an incorrect path. (I'm assuming this has something to do with the DOM not recognizing it anymore?)

Would anyone know how I could fix either version of code? Because I just can't see what's going on here.

Thanks so much!

ETA: as a side note, if I'm using the replaceWith() function, and I go to the tab with the HTML5 video and play it, then swap tabs, when I return to the tab with the video in it, the video is still there, works fine, and if you click "play" it'll play from the point where you swapped the tab (instead of starting over from the beginning).

If I go to the tab with the video in it, and move to another tab before playing the HTML5 video, THEN return to the tab with the HTML5 video, then the video is gone. It's really weird.

If it helps, so far this only happens in Google Chrome. I haven't actually checked yet to see if the problem exists in other browsers.

Oh! what a cool site! never heard of that! Let me see... – Shelly Jul 15 '12 at 13:18 — Shelly, Jul 15 '12 at 13:18
Okay, sorry so slow. http://jsfiddle.net/bKeCv/ – Shelly Jul 15 '12 at 13:42 — Shelly, Jul 15 '12 at 13:42

score 0 · Answer 1 · answered Jul 15 '12 at 13:23

you can try using detach(). find it here http://api.jquery.com/detach/ What this does is it actually removes a desired node from DOM tree and you can assign it some variable like this

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

I had same problem this worked for me

Inkbug · Answer 2 · 2012-07-15T13:37:11.433

-1

~~One can't use the .html() method with a jQuery object - one needs to use a string.~~

Edit: BTW, where did you find the .html(clone) code?

edited Jul 15 '12 at 13:37

answered Jul 15 '12 at 13:14

Inkbug

1,682
1
10
26

Interesting. Because the code I found above (the clone/remove/html version) was code I actually found here on this site, and it's worked for several people just fine. In fact, I used it on a couple of other sites and it worked fine. And even weirder is, it was working perfectly on this one just yesterday - but today it's not. SO I have no idea what's going on. In any case, I wouldn't know how to fix he line you're referring to, so if you can pass me some additional info on that point, I'd appreciate it. – Shelly Jul 15 '12 at 13:16
@Esailija Interesting. Never knew that and it is not in the docs. – Inkbug Jul 15 '12 at 13:18
Found the clone code here: http://stackoverflow.com/questions/1806032/flash-video-still-playing-on-div-that-is-removed-using-jquery-ie-bug – Shelly Jul 15 '12 at 13:35

jQuery cloning and removing div doesn't add div back in

2 Answers2

Linked