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

时间:2016-04-07 21:58:42

标签: javascript php jquery html ajax

我有一个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)

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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