如何使用jQuery在div中加载php页面

Question

Imagine that I have two divs , left div and right div ,

In the left div I have some button. When I click on the home button the page home.php loaded in the right div, I use load() function to do this and when I click on about button the page about.php loaded in the right div .

My problem is that I have some other buttons in that page (I mean about.php). When I click on it some other pages must load in the right div.

I mean when I click on about button in the left div, about.php loaded in the right div.

I don't have a problem doing this it's work fine , but the problem is when i click on a button in about.php , I want about.php to be hide and load x.php in his place (right div).

This is the code that I have :

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

Answer 1

First of all, you shouldn't nest your click handlers like you have done - they should be separate. Second, when you load the about.php jQuery is unaware of the new stuff that you have placed in the DOM. To fix that you use event delegation, meaning the click event from about.php will bubble up to an element that already existed at the time the page was loaded. jQuery is aware of that element and will handle the event properly.

$('#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

Instead of binding the event to the items on load, you tell the browser to check ther a.nav 's which occur in the document .

<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);
})

It's better to make the first selecttor ( $(document) ) as close to the actual elements, and highly recommended you use an ID:

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

In this snippet, all a.nav in #rightdiv will get triggered, initial load or dynamicly.

Answer 3

您必须在加载该php页面后绑定所有click事件，因此创建一个函数，该函数将在每个.load调用之后执行