jQuery克隆和删除div不会重新添加div [英] jQuery cloning and removing div doesn't add div back in

问题描述

我找到了一段代码，帮助我解决了最初的问题:我有一部分带标签的内容，其中一些内容包含视频.播放视频时，然后选择另一个选项卡，视频将继续在后台播放.我猜是常见问题:)

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

问题是这样的:test确实确实返回了正确的div.它获取先前在当前的活动标签之前打开的选项卡的div ID.那很有效.它也可以删除div.

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.

但是，它并没有放回原处.当我弹出警报"以查看正在发生的情况时，它将删除div，但从不将其放回原处(它返回为"undefined").所以我不知道clone只是不克隆，还是$('#'+test+'-holder').html(clone);只是不起作用.

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

且实际上运行良好-将内容替换为内容(视频播放停止)，但是-如果内容中有video标签(即HTML5视频播放)，则由于某种原因，视频丢失.返回的HTML完全正确，但由于我无法理解的原因，该视频不再被识别，将无法播放任何内容.就像根本不存在视频一样，或者路径不正确. (我假设这与DOM不再识别有关吗?)

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.

非常感谢！

ETA:作为旁注，如果我使用replaceWith()函数，然后转到带有HTML5视频的标签页并 play 播放，然后在返回到以下位置时交换标签页:包含视频的标签，视频仍然存在，并且可以正常播放，如果您单击播放"，它将从交换标签的那一刻开始播放(而不是从头开始).

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).

如果我转到包含视频的选项卡，然后在播放HTML5视频之前移至另一个选项卡，然后返回带有HTML5视频的选项卡，则视频消失了.真的很奇怪.

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.

如果有帮助，到目前为止，这仅在Google Chrome中发生.我实际上还没有检查问题是否存在于其他浏览器中.

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.

推荐答案

，您可以尝试使用detach().在此处找到 http://api.jquery.com/detach/ 这样做实际上是从DOM树中删除了所需的节点，您可以为它分配一些这样的变量

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

我也遇到了同样的问题

这篇关于jQuery克隆和删除div不会重新添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！