點擊加載所有“ a” HTML元素

Question

當有人點擊我網站上的任何元素時，我想顯示加載程序。

我的代碼：

(function ($) {
    $('body').append("<div id='loader-box'></div>");
    $("loader-box").html("");
    $("a").on('click', function (e) {
        $("loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
    });
}(jQuery));

問題是追加無法正常工作。 我不理解為什么。 謝謝！

-更新-

我找到了一個解決方案，這要感謝所有特別是Andrei Cristian Prodan的人，他們幫助我使用.on（）函數解決了問題。 我還使用了錯誤的函數來添加“ loader-box” div。

這是我的代碼：

(function($){
    $("body").prepend('<div id="loader-box"></div>');
    $("#loader-box").html("");
    $("html").on("click", "a",function(){
        $("#loader-box").html('<div class="loader-wrapper"><div class="loader-image"></div></div>');
    });
}(jQuery));

謝謝！

Answer 1

您在選擇器$（“＃loader-box”）中缺少“＃”；

同樣，如果您在頁面中的錨點存在之前（例如，在您的正文頂部或標題中）執行此代碼，則不會分配該點擊，因為$（'a'）為空。

而是這樣做： $('html').on('click', 'a', function() {...} );

Answer 2

您的選擇器只差一點了。 失蹤 ＃：

<script>
$(function($){
    $('body').append("<div id='loader-box'></div>");
        $("#loader-box").html("");
        $("a").on('click', function(e){
            $("#loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
        });
});
</script>

DOM准備就緒，需要正確編寫。