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

时间:2016-06-23 05:52:21

标签: jquery-load

这只是对我在这里要完成的事情的一次测试,这可能非常简单,但却让我的大脑陷入困境。我已经回顾了这里已有的一些最接近的比赛,但是我无法让它们发挥作用。

我正在尝试使用按钮将内容加载到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,可以用这种方式加载新内容。

1 个答案:

答案 0 :(得分:0)

因为在页面加载时,“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>