1

我有一个小型产品查看器，可让用户通过 javascript 旋转产品 360º 并查看产品的替代图像。现在它从一系列组成 360 度视图的图像开始，这些图像包裹在父 div 中，它的自身位于主容器 div 中，所以结构看起来像这样，

<div id="content">
   <div id="parent">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
...
   </div>
</div>

因此，使用 .replace 方法，我将加载一个新图像来替换 360 度视图。

$('#button').click(function () {
    $('#parent').fadeOut(500, function () {
        $('#parent').replaceWith('<img src="screen2.png" id="img2" class="child">');
    });
});

现在，我正在尝试使用 .load 方法恢复原始 360 度视图。

$("#button2").click(function () {
    $('#img2').fadeOut(500, function () {
        $('#content').load('external.html');
    });
});

现在 external.html 与原始视图具有相同的内容，但无法识别让 360 度视图工作的 javascript。我不会离开原始文档或 Web 视图，但不确定为什么它不会影响 external.html。

任何想法或帮助表示赞赏。

4

1 回答 1

1

问题很可能是您的 360 查看器绑定到您要替换的元素。.replaceWith()一旦你用or替换它们.load()，事件就不再被绑定。

在不知道您如何称呼 360 查看器的情况下，很难为您提供具体信息。但基本上，你会想要按照这些思路做一些事情：

$("#button2").click(function () {
    $('#img2').fadeOut(500, function () {
        $('#content').load('external.html', function() {
            // Re-bind the 360 viewer in this function
            // Below is pseudo-code, replace with proper code
            $("#content").viewer({...};
        });
    });
});
于 2013-06-13T19:11:45.537 回答