Question

想象一下，我有两个div，左div和右div，

在左边的div我有一些按钮。当我点击主页按钮页面home.php加载到右侧div时，我使用load（）函数来执行此操作，当我单击about按钮时，右侧div中加载了about.php页面。

我的问题是我在该页面中有一些其他按钮（我的意思是about.php）。当我点击它时，其他一些页面必须加载到正确的div中。

我的意思是当我点击左侧div中的about按钮时，about.php加载到右侧div中。

我没有问题，这样做工作正常，但问题是当我点击about.php中的按钮时，我希望about.php隐藏并加载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

您可以告诉浏览器检查a.nav中发生的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);
})

最好让第一个选择器（$(document)）尽可能接近实际元素，强烈建议您使用ID：

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

在此代码段中，a.nav中的所有#rightdiv都会被触发，初始加载或动态显示。

Answer 3

你必须在加载那个php页面后绑定所有点击事件，所以创建一个函数，在每次.load调用之后都会这样做

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

3 个答案: