頁面上的 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”不再加載（在屏幕上可見），我想執行一些代碼，無論哪個頁面現在加載到該 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

        }
    }
});