如何使用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调用之后执行