如何使用jQuery在div中加載php頁面

Question

想象一下，我有兩個div，左div和右div，

在左側的div中，我有一些按鈕。 當單擊主頁按鈕時，在右div中加載了home.php頁面，我使用load（）函數執行此操作；當單擊按鈕about時，在右div中加載了about.php頁面。

我的問題是該頁面上還有其他一些按鈕（我的意思是about.php）。 當我單擊它時，必須在正確的div中加載其他頁面。

我的意思是，當我單擊左側div中的about按鈕時，在右側div中加載了about.php 。

我這樣做沒有問題，但工作正常，但問題是當我單擊about.php的按鈕時，我希望about.php隱藏並在他的位置（右div）加載x.php 。

這是我的代碼：

$('#about').click(function () {
   $('#rightdiv').load('about.php', function() {
      $('#about_button').click(function () {
          $('#rightdiv').load('x.php');
      })
   })
})

Answer 1

首先，您不應像完成操作那樣嵌套您的點擊處理程序-它們應該分開。 其次，當您加載about.php時，jQuery不會意識到放置在DOM中的新內容。 要解決此問題，請使用事件委托，這意味着about.php中的click事件將冒泡到頁面加載時已經存在的元素。 jQuery知道該元素，並將正確處理該事件。

$('#about').click(function () {
   $('#rightdiv').load('about.php');
});

// 'click' event delegated to 'body'
$('body').on('click', '#about_button', function () { // #about_button is in about.php
   $('#rightdiv').load('x.php');
})

Answer 2

無需將事件綁定到加載的項目，而是告訴瀏覽器檢查document中出現的a.nav 。

<a class="nav" href="about.php">about.php</a>
<a class="nav" href="other.php">other.php</a>
<a class="nav" href="last.php">last.php</a>

$(document).on('click', 'a.nav',function (e) {
    e.preventDefault();
    var page = this.href;
    $('#rightdiv').load(page);
})

最好使第一個選擇器（ $(document) ）盡可能靠近實際元素，強烈建議您使用ID：

$('#rightdiv').on('click', 'a.nav',function (e) {});

在這個片段中，所有a.nav在#rightdiv將被觸發，初始加載或動態地。

Answer 3

您必須在加載該php頁面后綁定所有click事件，因此創建一個函數，該函數將在每個.load調用之后執行