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");
    });
});

比方说，用户单击了按钮“一个”，并且当前“ pageone.php”中的内容已加载到“占位符”中，现在他单击了其他按钮。一旦不再加载“ pageone.php”（在屏幕上可见），无论现在哪个页面已加载到该div中，我都想执行一些代码。

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

一旦不再加载“ 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

        }
    }
});

页面上的jQuery / JavaScript从div卸载

2 个答案: