Блог

Я хочу показывать загрузчик, когда кто-то нажимает на любой элемент на моем сайте.

Мой код:

 (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));
  

Проблема в том, что append не работает. Я не понимаю, почему. Спасибо!

— ОБНОВИТЬ —

Я нашел решение, спасибо всем, особенно Андрею Кристиану Продану, который помог мне решить проблему с помощью функции .on(). Я также использую неправильную функцию для добавления div «loader-box».

Это мой код:

 (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));
  

Спасибо!

Вам не хватает «#» в вашем селекторе $ («#loader-box»);

Также, если вы выполняете этот код до того, как якоря появятся на вашей странице (например, в верхней части вашего тела или внутри заголовка), щелчок не будет назначен, потому что $(‘a’) будет пустым.

Сделайте это вместо: $('html').on('click', 'a', function() {...} );

Ваши селекторы просто немного отклонены; отсутствуют #:

 <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 ready должен быть написан правильно.