1

私は、ユーザーが JavaScript を使用して製品を 360 度回転させ、製品の別の画像を見ることができる小さな製品ビューアを持っています。ここで、親 div にラップされた 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()またはに置き換えると.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 に答える