jquery ajax next page won't load

Question

I have index.html where there is nav menu, header, footer and div.content where jQuery parses html of page1.html.

page1.html loads fine, but when I add function to .nextPage2 to load page2.html, it wont work.

page1.html does not have head, body and script.

$( document ).ready(()=> {
//Ajax
$.ajax({
  url: 'page1.html',
  dataType: "html",
  success: function(result){
  $('.content').html(result);
}});

$(".nextPage2").click(()=>{
  $(".content").html("");
  $.ajax({
    url: 'page2.html',
    dataType: "html",
    success: function(result){
    $('.content').html(result);
  }});
})

//Ajax

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <nav class="navMenu">
    <div class="container">
      <div class="logo">
      </div>
      <ul>
        <li class="page1">page</li>
        <li class="page2">page</li>
        <li class="page3">page</li>
      </ul>
    </div>
  </nav>



  <div class="container">
    <div class="content">
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

<!--page1.html
<section class="page1">
  Bunch of code without head, script, body etc
  <button type="button" class="nextPage2" name="button">page2</button>
</section>

-->

please show us your HTML for the menu. We have no way to know if you've set this up correctly or not. Also are you by any chance replacing all the menu as well as the main content whenever you load the files by ajax? That would cause the HTML elements to be replaced, and the jQuery events are not automatically bound to their replacements. — ADyson, Feb 08 '19 at 08:05
@ADyson Post edited. Im only ajaxing content into div .content — Zyonix, Feb 08 '19 at 08:11
If your `".nextPage2"` is loaded dynamically, then you need `$(document).on('click', ".nextPage2", () =>)` as you can't bind events on dynamic elements — Justinas, Feb 08 '19 at 08:14

score 1 · Accepted Answer · answered Feb 08 '19 at 08:17

1

Like @Justinas said, you need http://api.jquery.com/on/

$(document).on("click",".nextPage2",()=>{
  $(".content").html("");
  $.ajax({
    url: 'page2.html',
    dataType: "html",
    success: function(result){
    $('.content').html(result);
  }});
})

answered Feb 08 '19 at 08:17

Roy Bogado

4,299
1
15
31

correct but it would help everyone if you explained _why_ this is necessary – ADyson Feb 08 '19 at 09:37
Just read the question, thats **WHY** – Roy Bogado Feb 08 '19 at 10:29
@Justinas explained *If your ".nextPage2" is loaded dynamically, then you need $(document).on('click', ".nextPage2", () =>) as you can't bind events on dynamic elements* – Roy Bogado Feb 08 '19 at 10:30
I don't think that really explains it fully tbh. And "can't bind on dynamic elements" isn't true...you can, but you have to use ".on" in a certain way. The explanation should be _why_ you have to use .on() and also explain the syntax - the significance of binding to a higher-level element such as `document`, and why the real selector is passed as an argument. Perhaps you could quote from the docs you linked to, it has a section about delegated events. (And besides, don't rely on other people's comments - add the explanation into your answer, so it's a complete answer by itself.) – ADyson Feb 08 '19 at 10:40
TBF though, the marked duplicate kind of explains it already, so maybe you needn't bother. – ADyson Feb 08 '19 at 10:41

jquery ajax next page won't load

1 Answers1