jQuery Ajax下一页将无法加载

Question

这个问题已经在这里有了答案：

• 在动态创建的元素上进行事件绑定？ 23个答案

我有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);
  }});
})