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

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

委托示例

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

jQuery内容通过.load（）加载但是href链接不起作用

2 个答案: