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

Question

我对使用 .load() 加载的 HTML 内容有疑问。我有一个运行良好的“手风琴”菜单，单击菜单中的项目时，有一个小的 jquery 代码用于将所需内容加载到分配的 [div]

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

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"] 内，内容被注入/加载到[div id="pageloadarea"]

单击菜单中的 Page1 成功将 Page1.php 加载到 [div] 中，单击 Page2、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;
    });
});

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

Answer 2

一旦您的 now 页面加载或使用委托，您需要将所有事件处理程序附加到他的链接。

委托示例

HTML 链接：

<!-- add a class to filter ajax links on "ajaxify", also use the HREF attribute
     For the page to be loaded - not sure whay you arent doing that now... -->
<a href="Page2.php" class="Page2 ajaxify">Page2</a>

JS

// use delegation to attatch the event handlers

$(function(){
   $(document).on('click', 'a.ajaxify', function (e) {
        e.preventDefault(); // prevent normal link navigation
        var $this = $(this),
            url = $this.attr('href');

        $("#pageloadarea").load(url);
        $('head').append('<link rel="stylesheet" href="includes/style.css" type="text/css" />');

        return false; 
   });
});

通过使用委托，处理程序附加到document 元素，当点击事件冒泡时，它会被过滤...如果触发器是a.ajaxify，则将调用处理程序。这允许您处理首次附加处理程序时不在 DOM 中的 a.ajaxify 实例。