Question

我有一个小型产品查看器，可让用户通过javascript旋转产品360º并查看产品的替代图像。现在它开始于一系列图像组成包含在父div中的360视图，其自身位于主容器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。

任何想法或帮助都是值得欣赏的。

Answer 1

问题很可能是您的360查看器被绑定到您要替换的元素。使用.replaceWith()或.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({...};
        });
    });
});

外部HTML不会识别javascript

1 个答案: