Question

我有index.html，其中有nav menu，header，footer和div.content，其中jQuery解析了page1.html的html。

page1.html可以很好地加载，但是当我向.nextPage2添加函数以加载page2.html时，它将无法工作。

page1.html没有head，body和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>

-->

Answer 1

像 @Justinas 一样，您需要http://api.jquery.com/on/

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

jQuery Ajax下一页将无法加载

1 个答案: