jQuery 内容通过 .load() 加载，但 href 链接不起作用

Question

我在使用 .load() 加载 HTML 内容时遇到问题。我有一个运行良好的“ Accordion ”菜单，单击菜单中的某个项目时，有一个小的 jquery 代码用于将所需的内容加载到指定的 [div]

我遇到的问题是，在加载的某些页面上有一些 href=""链接。单击这些链接不会导致“下一页”加载到 div 中，而是实际上强制重新加载主页(就像您刚刚按下浏览器上的“重新加载”按钮一样)...

menu.js(截图)

$(document).ready(function() {
    $(".Page1").click(function () {
        $("#pageloadarea").load('Page1.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });

    $(".Page2").click(function () {
        $("#pageloadarea").load('Page2.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });
});

index.php 页面的菜单部分(截取)

<ul>
  <li class="button"><a href="" class="Page1">Page1</a></li>
  <li class="dropdown">
    <ul>
      <li><a href="" class="Page2">Page2</a></li>
      <li><a href="" class="Page3">Page3</a></li>
      <li><a href="" class="Page4">Page4</a></li>
    </ul>
  </li>
</ul>

在index.php页面中，菜单位于[div id="menu"]内，内容被注入(inject)/加载到[div id ="pageloadarea"]

单击菜单中的Page1成功地将Page1.php加载到[div]中，单击Page2也是如此em>、Page3 和 Page4(从菜单中)...

一旦将Page1.php加载到[div]中，就会出现一个标准链接

<a href="" class="Page2">Page 2</a>

该链接无效。我有许多子页面，其中有 [a href] 链接，一旦主要内容通过 .load() 过程，它们都不起作用......

如有任何帮助，我们将不胜感激!

Answer 1

$(document).ready(function() {
    $(document).on("click",".Page1", function () {
        $("#pageloadarea").load('Page1.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });

    $(document).on("click",".Page2", function () {
        $("#pageloadarea").load('Page2.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });
});

使用它，因为它将事件绑定(bind)到新加载的 DOM 元素。