使用 jquery 从按钮中将内容加载到容器 div

Question

这只是对我要在这里完成的事情的测试，它可能非常简单，但却让我绞尽脑汁。我已经查看了此处可用的一些最接近的匹配项，但我无法使它们中的任何一个发挥作用。

我正在尝试使用按钮将内容加载到 div，如下所示：

<div class="load-container">
  <button class="load-first">Load First</button>
</div>

<script type="text/javascript">
 $(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
 $(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
 $(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>

这实际上在第一次尝试时有效，但随后，当“/test-1.html”加载时，下一步按钮不起作用。这是 /test-1.html 文件中的内容：

This is the first one.<br>
<button class="load-second">Load Second</button>

点击第二个按钮应该会加载下一段内容，但它什么也没做。问题是按钮在目标容器内 div 吗？我需要一个容器 div，里面有按钮，可以通过这种方式加载新内容。

Answer 1

因为在页面加载时，"load-second" 按钮还不存在，因此 click() 事件没有注册到尚未通过 load() 内容到达的按钮，在 DOM 中创建按钮后，您需要附加事件，请尝试以下操作：

<div class="load-container">
  <button class="load-first">Load First</button>
</div>

<script type="text/javascript">
     $(".load-first").click(function() { 
        $(".load-container").load("/test-1.html", function(){  
        // now load-second button is available, register the click handler
        $(".load-second").click(function() { 
            $(".load-container").load("/test-2.html", function(){
            // now load-third button is available, register the click handler
            $(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
            });
        });
       });
});

</script>

使用 jquery 从按钮中将内容加载到容器 div

Loading content into a container div from a button within using jquery

jquery-load