通过.load()加载jQuery内容，但href链接不起作用 [英] jQuery content loaded via .load() but href link not working

问题描述

我对使用.load()加载的HTML内容有问题.我有一个手风琴"菜单，它运行良好，单击菜单中的一个项目后，会出现一个小的jquery代码，用于将所需的内容加载到分配的[div]

I have a problem with HTML content loaded with .load(). I have an 'accordion' menu that is working great, and on clicking an item in the menu there's a small jquery code used to load the required content into the assigned [div]

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

The problem I'm having is that on some of the pages that are loaded there are some href="" links. Clicking these links does not cause the 'next' page to load into the div, but instead actually forces a reload of the main page (as though you'd just pressed the RELOAD button on the browser)...

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"]

In the index.php page the menu is located inside [div id="menu"] and the content is injected/loaded into [div id="pageloadarea"]

单击菜单中的 Page1 成功将 Page1.php 加载到[div]中，就像单击 Page2 ， Page3一样和 Page4 (从菜单中)...

Clicking on Page1 in the menu successfully loads Page1.php into the [div], as does clicking Page2, Page3 and Page4 (from the menu)...

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

Once Page1.php has been loaded into the [div] there is a standard link

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

这是无效的链接.我有很多子页面，其中包含[a href]链接，一旦主要内容通过.load()流程，它们都无法工作...

This is the link that does not work. I have numerous sub-pages that have [a href] links within them and none of them work once the main content has been through the .load() process...

任何帮助将不胜感激！

推荐答案

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

Use this as it will bind the event to new loaded DOM elements also.

这篇关于通过.load()加载jQuery内容，但href链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！