javascript - jquery 加载内容 - 链接在上传内容的同一 div 中

Question

使用 jquery 加载函数将内容从外部 html 加载到 div 中后，我想从另一个外部 html 加载另一个内容，但是带有加载内容链接的按钮位于已加载的 div 中。第一次很简单，我使用了这个 jquery 代码 -

 $(document).ready(function(){
 $('li#contact').click(function() {
 $("#section").load("another-page.html #newcontent");
    return false;
}); 

在我加载的新内容中，有一个我想用作链接的 div。新代码应该如何？我用过这个，但没用 -

$(document).ready(function(){
$('anotherpage.html #newcontent #button').click(function() {
    $("#section").load("another-page2.html #newcontent2");
    return false;
}); 

这是第一个 html 页面的代码:

<ul>
    <li id="contact">Contact</li>
</ul>

<div id="section">
</div>

这是来自 another-page.html 的代码(div 已加载到第一个 html 中):

<div id="newcontent">

   <div id="button"></div>

</div>

这是来自 another-page2.html 的代码:

<div id="newcontent2">
</div>

关于如何正确编写第二个 jquery 代码，您有任何简单的解决方案吗？

Answer 1

$(document).ready(function() {
  $('li#contact').click(function() {
    // load first `url`
    $("#section").load("another-page.html #newcontent", function() {
      // when `#button` loaded into `DOM` attach `click` event
      // which loads second `url` at `#button` `click` event
      $("#button").click(function() {
        $("#section").load("another-page2.html #newcontent2");
      })
    }); 
  });
});