Php 持续刷新DIV内容的按钮停止工作

目标：
单击“下一张幻灯片”按钮，用不同php文件中的新内容刷新/替换

内容。每张幻灯片都有自己的php文件。这是我正在建设的一个在线课程。每次单击按钮时，

现有内容将替换为系列中下一张幻灯片（php文件）中的新内容。我还想建立一个返回按钮，以转到上一张幻灯片，但我还没有到这一步

问题：
我目前正在尝试使用jquery/ajax。按钮在前两张幻灯片中起作用（用新幻灯片内容刷新

），但在第三张幻灯片上不起作用。我将按钮放在每张幻灯片上（更喜欢这种方式）。这可能是问题之一。我认为另一个问题可能与page变量的文件路径有关。我还想知道这个问题是否与主页只“包含”Div中的其他文件有关。像这样：

    <div id="header">
      <?php include 'pf_header.php'; ?>
    </div>
    <div id="menu">
      <?php include 'pf_menu.php'; ?>
    </div>
    <div id="content">
      <?php include 'pf_welcome.php'; ?>
    </div>
    <div id="footer">
      <?php include 'pf_footer.php'; ?>        
    </div>

幻灯片1（按钮工作）

幻灯片2（按钮工作）

说明

说明

幻灯片3（按钮不工作）

幻灯片是否通过AJAX动态加载？您还具有重复的id（

main、nextbtn、边栏、aside1等

）。jQuery在运行时只知道页面中的元素，因此添加到DOM中的新元素无法被jQuery识别。为了防止这种使用，将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载上运行时，该点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想情况下，您在哪里加载

Script.js

？既然你的第二个按钮能用，我猜是在幻灯片上？请注意，第二张幻灯片是

basics/…

，如果使用相对URL加载JS，则可能找不到它。你检查过浏览器控制台了吗？（F12）Jay&Kenney，感谢您的回复。你给了我一些好东西让我思考。我做了以下更改，第三张幻灯片上的按钮现在可以工作了。我希望问题得到解决，但我还有很多测试要做，包括第4张幻灯片。我在做这个兼职，所以我可能还要多花几天时间再做一次。写这封信是因为我不想让你被绞死。这是我第一次使用Stackflow，所以请告诉我在这个过程中是否需要进一步做任何事情。将主页上content div的id更改为class。2.删除每张幻灯片中的。3.将主、侧栏、aside1和aside2 id更改为每张幻灯片中的类。幻灯片是否通过AJAX动态加载？您还具有重复的id（

main、nextbtn、边栏、aside1等

）。jQuery在运行时只知道页面中的元素，因此添加到DOM中的新元素无法被jQuery识别。为了防止这种使用，将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载上运行时，该点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想情况下，您在哪里加载

Script.js

？既然你的第二个按钮能用，我猜是在幻灯片上？请注意，第二张幻灯片是

basics/…

，如果使用相对URL加载JS，则可能找不到它。你检查过浏览器控制台了吗？（F12）Jay&Kenney，感谢您的回复。你给了我一些好东西让我思考。我做了以下更改，第三张幻灯片上的按钮现在可以工作了。我希望问题得到解决，但我还有很多测试要做，包括第4张幻灯片。我在做这个兼职，所以我可能还要多花几天时间再做一次。写这封信是因为我不想让你被绞死。这是我第一次使用Stackflow，所以请告诉我在这个过程中是否需要进一步做任何事情。将主页上content div的id更改为class。2.删除每张幻灯片中的。3.将主、侧栏、aside1和aside2 id更改为每张幻灯片中的类。

$(document).ready(function() {
    $(".slide").on("click", function(e){
        $(".content").load($(this).attr("page"));
    });
});

 <div class="content">
  <div id="main">
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="pf_instructions.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

 <div class="content">
  <div id="main">
    <p>INSTRUCTIONS</p>  
    <p>INSTRUCTIONS</p>  
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_introduction.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

 <div class="content">
  <div id="main">
    <p></p>
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_quiz.php">
  </div>
  <div id="sidebar">       
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
   </div>
  </div>