jQuery通过.load()加载的内容，但是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>

这是无法工作的链接。我有许多子页面，其中包含链接，但在主要内容经过.load()处理后，它们都无法使用...如果能得到帮助将不胜感激！

- Rob Cowell

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元素上。

- Kailash Yadav

---

@KailashYadav 我也遇到了同样的问题。这个解决方案救了我的一天。谢谢 Kailash！ - Saurabh R S

Answer 2

你需要在页面加载后将所有事件处理程序附加到链接，或者使用委托。

委托示例

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实例。

- prodigitalson

---

当时我没有在HREF属性中填充"Page2.php"，因为在Page1上点击链接（加载到[div]中）会出现某些原因导致PAge2完全加载，而不是加载到[div id="pageloadarea"]部分（好像有一个隐含的target="_self"）。通过将HREF保留为空，它确实可以正确加载... - Rob Cowell

这是因为您没有在点击事件上调用 preventDefault()。 - prodigitalson