导航时如何在不刷新页面的情况下将用户重新定位到另一个页面的内容？

Question

我正在使用 javascript - ajax 和 jquery 从 (#menu a)[见下文 'you.php'] 下的 php 文件中加载所有内容，而无需在浏览页面时刷新页面 - 效果很好。

但是，我如何在 content-A 上创建某种超链接（它加载并显示 home.php 中的所有内容），当单击时，它会将用户重新定位并显示到 settings.php(B) 的内容.

请注意，我的 href 超链接末尾没有 .php。 “general.js”文件解释了原因。

(you.php):

        <div id="menu">

            <a href="home">Home</a>

            <a href="settings">Settings</a> // Content (A)

        </div>

        <div id="content"><div>

        <script src="./js/jquery-2.1.4.min.js"></script>

        <script src="./js/general.js"></script>

(general.js):

$(document).ready(function() {

// initial content that will be loaded first upon logging in:

$('#content').load('home.php');

// handle menu clicks

$('#menu a').click(function(){

    var page = $(this).attr('href');

    $('#content').load(''  + page +  '.php');

    return false;

    });

});

(home.php):

 <h1> welcome to homepage </h1>

 Would you like to go to your settings?

 Click here: <a href="settings.php>Settings</a> 

显然，在 home.php 中像这样执行 href 超链接的问题在于，它直接进入了 settings.php 页面。这使我的 general.js (ajax) 和 jquery 文件毫无意义。 由于使用 ajax 和 jquery 的全部目的是为了平滑导航，并且在浏览网站时不会刷新页面。

不，我不想在 home.php 的内容中加载 settings.php 的内容，'loadception' 不是我要找的。​​p>

这是我的简单问题，我想要一个简单的 php,javascript,ajax 答案。

有什么想法吗？

Answer 1

您需要使用事件委托。为了在我的示例中获得更好的性能，必须加载到“#content”中的所有链接都有一个“open”类，所以在 jquery 中你可以这样做：

$('#content').on('click', '.open', function(e) {
    e.preventDefault();

    var page = $(this).attr('href');
    $('#content').load(''  + page +  '.php'); // concat .php if it's only necessary
});

更新 我在github上做了一个demo：https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation