3

我对使用 .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()......

任何援助将不胜感激！

4

2 回答 2

4 
$(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 元素。

于 2013-05-16T20:30:21.567 回答
1

一旦您的 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那么处理程序将被调用。这允许您处理a.ajaxify第一次附加处理程序时不在 DOM 中的实例。

于 2013-05-16T20:29:26.680 回答