0

Putting a div from a "source" page into a div in a "target" page doesn't capture the script.

Code from target (receiving) page:

TOC link code:

<li class="sub_menu--item">
            <a href="#"  class="sub_menu--link sub_menu--link__active" onClick="changeText('modalimage.html #source')">Network Topology</a>
          </li>

JavaScript code that gets the "source" div:

<script type="text/javascript">
   function changeText(source){
        $("#target").load(source)
    }   
</script>

HTML for the "source" page:

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="flex-style.css" rel="stylesheet" type="text/css">


</head>

<body>
    <link href="flex-style.css" rel="stylesheet" type="text/css">
<div id="source">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<img id="myImg" src="img/networkdiag.png" alt="Network Architecture" width="657" height="333">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>                   <!-- This doesn't seem to get loaded with the rest of the div
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

</div>  
</body>

</html>

Using Chrome browser, this is the result shown in the Developer Tools after the "source" page has been loaded by the changeText() function:

Output of dev tools console in Chrome

Seanmc2
  • 67
  • 1
  • 6
  • jQuery executes the script using `eval()`, it doesn't put it into the DOM. – Barmar Feb 09 '18 at 23:20
  • Barmar: Unfortunately that doesn't fix my problem. When I click on the image after the DIV is loaded into the target page it doesn't go "modal". If I view the source page by itself, it works fine. – Seanmc2 Feb 09 '18 at 23:32
  • Why don't you use event delegation to bind to dynamically-added content, instead of reloading the script? – Barmar Feb 09 '18 at 23:35
  • Barmar: I would If I knew how. Can you provide an example? – Seanmc2 Feb 10 '18 at 01:37
  • See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Feb 10 '18 at 01:39

0 Answers0