javascript - html 通过ajax load() 连续加载html(无JSON)

Question

我的概念是将 html 文件从一个文件加载到另一个文件。下图可以更好地解释。例如，我有 no1.html, no2.html,no3.html, no4.html ... 并且它们共享一个 JavaScript 文件，所有 html 文件都有自己的内容。

第一个 HTML 文件 no1.html 加载 no2.html，我的 javascript 适用于 no1.html，例如 $('#element').load('no2.html #content'); 然后no2.html js 就像 $('#element').load('no3.html #content');

如果所有文件只共享一个javascript文件无法连续加载html页面，有没有办法让html连续加载另一个html？

Answer 1

我猜你想做的是这样的:

my.js

$(function() {

      // delegate click event to ajax content
      $("body").on("click",".load_button",function() { 

        $(this).hide(); // hide this button
        var area_name = $(this).data("area");
        var next_file = $(this).data("next");
        $("#"+area_name).load(next_file);
    });
});

no1.html

<script src="my.js"></script>

This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>

no2.html

This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>

no3.html

This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>

在此示例中，my.js 仅在 no1.html 中包含一次。
希望这会有所帮助。