如何关闭或使已加载的div返回其原始状态

Question

我有一个index.php ，其中包含具有内容的#container div和一个#open按钮。 页面上还有2个标签。

...
<div id="Tabs">
    <div id="content1Tab"></div>
    <div id="content2Tab"></div>
</div>
<div id="container">
   <div id="content1">
       ..someContent...
       <button id="open1">Open</button>
   </div>
   <div id="content2">
       ..someContent...
       <button id="open2">Open</button>
   </div>
</div>

单击content1Tab使用z-index将content1带到容器的最前端。

单击content2Tab将content2置于最前面。

$(document).ready(function(){ 
    $("#content1Tab, #content2Tab).click(function(event) {
            var myString = $(this).attr('id');
            var parts = myString.split("Tab");
            var thePart = parts[0];

            $("#content1, #content2).css('z-index', 7);
            $("#"+thePart).css('z-index',9);
       });
...

点击上open1成功加载容器 containerOther股利从page.php文件内容。

$('#open1').click(function(){
        $("#container").load("../page.php #containerOther> *");
    });

我想要单击选项卡以重新加载容器的原始内容。 我怎样才能做到这一点？

我试过了：

$("#content1Tab, #content2Tab).click(function(event) {            
        $("#container").load("../index.php #container > *");
       ....
    });

但随后的容器停留在内容1，无论我点击了哪个标签页，以及open1没有做任何事情。 调试显示单击不输入js代码。 我试过了：

 $("#container").load("../index.php #"+thePart);

内容会随着选项卡的单击而变化，但是该按钮仍然不起作用。 索引和页面都有指向js文件的链接。

Answer 1

如果我正确地遵循它，则它是在#container的内容中进行排序，首先将按钮绑定到jQuery功能。 这样，绑定将丢失，因此当您再次单击这些按钮时，什么也不会发生。

解决方案是在内容刷新后再次绑定，我认为使用回调函数：

$('#container').load("../index.php #"+thePart, function() {
    $('#open1').click(function(){
        $("#container").load("../page.php #containerOther> *");
    });
});

我认为在内容刷新后绑定一个单独的函数会更好，因为如果您使用上面的代码，则绑定问题将在首次成功刷新内容后发生：)。