Can someone explain to me why this isn't working? Ajax Load + scripts on html

Question

The script won't load after the ajax has loaded the html content, why is this simply step not working. Here is what I got:

MakoStart.html: (The main page that will change)

<div class="makoislandintro" id="makochange">   
    <div class="makochoicesfirst">
        <img src="../img/makoislandspecial/makobeach.jpg" class="makoislandbeach" id="makoislandbeach" alt="current">
        <br>
    </div>
</div>
<script>
    document.getElementById("makoislandbeach").onclick = function() {
       $('#makochange').load('makoisland.html');
    };  
</script>

This works, when i click the image with the id: makoislandbeach, the content changes to whats in makoisland.html.

Here is what is in makoisland.html:

<div class="makochoices">
    <div id="rightside">            
        <img src="../img/makoislandspecial/waterstream.jpg" class="makoislandchoice" id="waterstream" alt="right choice">
    </div>
    <div id="leftside">
        <img src="../img/makoislandspecial/islandside.jpg" class="makoislandchoice" id="islandside" alt="left choice">
    </div>
</div>
<script>
    document.getElementById("waterstream").onclick = function() {
       $('#makochange').load('waterstream.html');
    };
    document.getElementById("islandside").onclick = function() {
       $('#makochange').load('islandside.html');
    };  
</script>

Once the content changed, the script doesn't execute when i click the 2 new images that have replaced the old content. I have made a waterstream.html, it is the same as makoisland.html but with different images, but the script won't work after the first transition.

Answer 1

Take a look at this answer . As it said:

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Maybe you could do something like this . Instead of using load , use ajax . It's slightly different.

<div class="makoislandintro" id="makochange">   
    <div class="makochoicesfirst">
        <img src="../img/makoislandspecial/makobeach.jpg" class="makoislandbeach" id="makoislandbeach" alt="current">
        <br>
    </div>
</div>
<script>
    document.getElementById("makoislandbeach").onclick = function() {
        $.ajax({
            url: "makoisland.html",
            context: document.body,
            success: function(responseText) {
                $("#makoislandbeach").html(responseText);
                $("#makoislandbeach").find("script").each(function(i) {
                    eval($(this).text());
                });
            }
        });
    };
</script>