页面上的jQuery/JavaScript从div卸载

Question

以下是我想要实现的目标，我将努力简化事情。

这是我用于导航的按钮：

<button id="one">One</button>
<button id="two">Two</button>
<button id="three">Three</button>

在正文中，我有一个名为"占位符"的div：

<div id="placeholder"></div>

点击按钮时，将其他页面的内容加载到该div中：

$(document).ready(function(){
$('#one').click(function(){
$('#placeholder').load("pageone.php");
});
$('#two').click(function(){
$('#placeholder').load("pagetwo.php");
});
$('#three').click(function(){
$('#placeholder').load("pagethree.php");
});
});

假设用户点击了按钮"one"，当前"pageone.php"中的内容被加载到"placeholder"中，现在他点击了其他按钮。我想在"pageone.php"不再加载(在屏幕上可见(时执行一些代码，无论现在哪个页面加载到该分区中。

所以我不确定我是否解释得很好，但我不想在点击其他按钮或加载其他页面时执行代码。

我想在"pageone.php"不再加载后执行代码。

我在这里使用了jQuery，但纯JS答案也可以使用。

提前谢谢。

Answer 1

您可以像这样向加载函数添加回调。

$('#two').click(function(){
$( "#placeholder" ).load( "pagetwo.php", function() {
alert( "Pageone is not loaded." );
});
});

Answer 2

$(document).ready(function(){
var old_page = "";
var new_page = "";
$('#one').click(function(){
$('#placeholder').load("pageone.php");
new_page = "one";
check();
});
$('#two').click(function(){
$('#placeholder').load("pagetwo.php");
new_page = "two";
check();
});
$('#three').click(function(){
$('#placeholder').load("pagethree.php");
new_page = "three";
check();
});
function check() {
if(new_page!==old_page) {
// old page is unloaded.
// do your code here
// once done, don't forget to update old_page
old_page = new_page;
} else {
// same page is loaded again
// you may want to do something different here
}
}
});