導航時如何在不刷新頁面的情況下將用戶重新定位到另一頁面的內容？

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”不是我想要的。

這是我的簡單問題，我想用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上創建了一個演示： https : //github.com/josemato/stackoverflow/tree/master/spa-event-delegation