为什么$（this）适用于.hover（）但不适用于.ready（）？

Question

所以，我试图让backstretch.js使用从db加载的多个div。

但是我无法为每个div获得单独的图像。

这非常有效，当我悬停这些框时，背景会显示出来，但是我不想在页面加载后立即加载它。

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

我已经尝试使用 .ready（）而没有任何结果，因为它似乎没有注册“$（this）”？ ：

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

以下是HTML：

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

请帮助我......如果有更好的方式，请回复：）

Answer 1

来自 docs ：

  

.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"));
});