Loading content into a container div from a button within using jquery

Question

This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.

I'm trying to load content into a div using a button, like so:

<div class="load-container">
  <button class="load-first">Load First</button>
</div>

<script type="text/javascript">
 $(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
 $(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
 $(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>

And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:

This is the first one.<br>
<button class="load-second">Load Second</button>

Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.

Answer 1

Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:

<div class="load-container">
  <button class="load-first">Load First</button>
</div>

<script type="text/javascript">
     $(".load-first").click(function() { 
        $(".load-container").load("/test-1.html", function(){  
        // now load-second button is available, register the click handler
        $(".load-second").click(function() { 
            $(".load-container").load("/test-2.html", function(){
            // now load-third button is available, register the click handler
            $(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
            });
        });
       });
});

</script>