Почему $(this) работает с.hover(), а не с.ready()?

Question

Итак, я пытаюсь получить backstretch.js для работы с несколькими div, которые загружаются из БД.

но я не могу получить отдельное изображение для каждого div.

Это прекрасно работает, когда я наведите курсор на поля, появляется фон, но я не хочу, чтобы он загружался, как только страница загружается.

 $(".tournament-thumb").hover(
    function(){
        $(this).backstretch($(this).data("url"));
       }
);

Я пробовал это с .ready() без какого-либо результата это, кажется, не регистрирует "$(это)"?:

     $(".tournament-thumb").ready(
    function(){
        $(this).backstretch($(this).data("url"));
       }
);

Вот HTML-код:

<div class="tournament-thumb" data-url="images/image.jpg"></div>

Пожалуйста, помогите мне... Если есть лучший способ, чем это, пожалуйста, ответьте с этим тогда:)

Answer 1

Из документов:

Метод.ready() может быть вызван только для объекта jQuery, соответствующего текущему документу, поэтому селектор можно опустить

Так что вы можете использовать только $(document) для ready() метод.

Answer 2

Возможно, лучшее решение - это привязать делегирование к объекту документа, как

 $(document).on('hover','.tournament-thumb',function(){
    $(this).backstretch($(this).data("url"));
 });

Answer 3

Хорошо, я решил это с помощью jQuery.each

$.each($(".tournament-thumb"), function() {
   $(this).backstretch($(this).data("url"));
});