Question

我有一个index.php页面，它保存并加载所有内容，因此不需要加载到其他页面，一切都是动态发生的。所以假设我在index.php中有一个div：

<div id="content"></div>

我有一个完整的content.php文件，其中包含大多数div / pages：

<div id="cont1">something :
   <div id="innercont1"><a href="#">Dynamic click</a>
   </div>
</div>
<div id="changeinnercont1">
   <img src="images/pic.jpg" />
</div>

到目前为止这么好但是jQuery \ Ajax脚本在index.php中没有工作，它应该操作来自content.php的div。这是加载onclick事件的脚本，它在index.php中#content中的div并且它完美地工作：

$("#content").fadeOut("slow",function(){
  $("#content").load("content.php #cont1");
  $("#content").fadeIn();
});

但是当它从content.php加载这个内容时，当我点击链接文本时没有任何反应，因为index.php中的另一个脚本无法正常工作：

$(function () {
    $("#innercont1").click(function (e) {
    e.preventDefault();
        $("#innercont1").load("content.php #changeinnercont1");
    });
});

我认为浏览器不是从另一个页面保存加载的div而是只保存自己的#content（index.php）

Answer 1

可能是您的点击事件侦听器在#innercont1存在之前被绑定。如果在一个块中加载和绑定侦听器会发生什么，例如

$("#content").fadeOut("slow",function(){
  $("#content").load("content.php #cont1");
  $("#innercont1").click(function (e) {
    e.preventDefault();
    $("#innercont1").load("content.php #changeinnercont1");
  });
  $("#content").fadeIn();
});

Answer 2

创建("#innercont1").click事件侦听器时，DOM中没有id为innercont1的元素，因为该元素是从其他地方动态加载的。此实例需要的是一个事件侦听器，它将随时捕获具有该id的任何元素。您可以将侦听器绑定到body元素，如下所示：

$(document.body).on('click', '#innercont1', function(){
    //code
});

更改从另一页面加载的div与另一页面在同一页面上

2 个答案: