jquery interferes with loadscene?

[DEHBChris]

Hi,

thanks for the great viewer! For a bigger tour i am trying to build a floorplan including clickable mappoints with multiple levels (7 floors in total) which is located on the right side of the screen. To achieve this i built a div as a container which includes the buttons for changing the levels and a div for each level which includes the mappoints. Using jquery the displayed level div gets replaced by clicking the desired level button.

For the mappoints i am using 'loadscene' to load the correct scene of the tour.

Unfortunately this only works at the start level which is displayed first after loading the tour. After changing the levels the buttons seem to become inactive and no scene is loaded.

Could the use of jquery be a reason for this?

Live demo at: https://www.colorfantasy-fanpage.de/color-magic/test.html

Creating the floorplan menu

<div id="panorama">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    

<div class="container">

<div>
<div class="div1 replaceDiv" hidden="hidden">
<img id="deckplan" src="deck6.png" />
<button class="mappoint" id="mp-24h-kiosk" style="top: 14%;left: 62%;"><img src="6.png" /></button>
</div>
<input type="image" src="6.png" alt="Deck 6" style="position: absolute; top: 10%;left: 20%;" class="buttonShowDiv"/>
</div>

<div>
<div class="div2 replaceDiv" hidden="hidden">
<img id="deckplan" src="deck7.png" />
<button class="mappoint" id="mp-magic-show-lounge-01" style="top: 14%;left: 62%;"><img src="7.png" /></button> </div>
<input type="image" src="7.png" alt="Deck 7"  style="position: absolute; top: 17%;left: 20%;" class="buttonShowDiv"/>
 </div>

<div id="mainDiv">
  <div class="replaceDiv">
    <img id="deckplan" src="deck7.png" />
    <button class="mappoint" id="mp-magic-show-lounge-01" style="top: 14%;left: 62%;"><img src="7.png" /></button>
  </div>
    </div>

<script>
$(".buttonShowDiv").on("click", function(){
  $("#mainDiv .replaceDiv").replaceWith($(this).closest("div").find(".replaceDiv").clone());
  $("#mainDiv .replaceDiv").show();
})
</script> 

Script for changing the scene on one mappoint

document.getElementById('mp-24h-kiosk').addEventListener('click', function(e) {
    viewer.loadScene('24h-kiosk');
}); 

Thank you in advance!

[mpetroff]

The new DOM content you're creating when you switch levels doesn't have an event listener attached and thus does nothing. You can see this by using the inspector in your browser's developer tools.

The problem is either your use of replaceWith or your use of clone; I'm not familiar with jQuery, so I'm not sure which is the culprit. If you just hide and show the <div> elements instead of replacing them, you won't have this issue. Alternatively, depending on what jQuery does, you might also be able to avoid it by setting an onclick property on the elements instead of using addEventListener.

[DEHBChris]

Hi mpetroff,

thank you for your quick reply. I replaced the replaceWith function for changing the floorplans with a hide and show function using jquery and now the loading of the scenes is working flawlessly.

Thank you and best regards