点击加载所有“ 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准备就绪，需要正确编写。