jQuery.appear根本不工作

任何人都可以看到为什么这个HTML代码不起作用。jQuery.appear根本不工作

它应该在图像可见时显示警报，并且当图像不可见时再显示警报。

它不适用于本地库。

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="https://raw.githubusercontent.com/morr/jquery.appear/master/jquery.appear.js"></script> 

<script> 
     var intervals = []; 
     $("[id^=light]").on('appear', function(event, $all_appeared_elements) { 
      alert("appeared"); 
     }); 

     $("[id^=light]").on('disappear', function(event, $all_disappeared_elements) { 
      alert("disappeared"); 
     }); 

      </script> 

     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh"> 

    </body> 
</html>

来源

2016-11-16 davinci

这就是...很多'
'标签，会不会更好？ –

没有与您的jQuery选择器相匹配的元素，因此不会出现“出现”或“消失”事件。这个JavaScript在运行时无效。 – David

你选择了'[id^= light]'找不到'id =“LichtStatus”'......我想知道为什么......也许是一个错字？ ;） –

将您的代码放入文档以准备确保DOM已加载。还要指定@Louys Patrice Bessette提到的元素。我加了appear这个@Deep说得对。

<script>  
$(function(){ 
var intervals = []; 
    $("img[id^='Licht']").appear(); 
    $("img[id^='Licht']").on('appear', function(event, $all_appeared_elements) { 
     alert("appeared"); 
    }); 

    $("img[id^='Licht']").on('disappear', function(event,$all_disappeared_elements) { 
     alert("disappeared"); 
    }); 
}); 
</script>

我看到警报显示两次上面的代码。在我更改了代码后，我注意到警报不会显示两次。

$(document.body).on('appear',"img[id^='Licht']", function(event, $all_appeared_elements) { 
     alert("appeared"); 
    }); 

    $(document.body).on('disappear',"img[id^='Licht']", function(event, $all_appeared_elements) { 
     alert("disappeared"); 
    });

来源

2016-11-16 13:59:18 randominstanceOfLivingThing

编辑并添加了详细信息。 – randominstanceOfLivingThing

仍然缺少一个大括号（在文档准备好）...最好使用'$（function（）{_您的DOM就绪代码在这里_}）;'反正 –

修正了错字。 – randominstanceOfLivingThing

试试这个。一旦向下滚动

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js"></script> 

     <script> 
     $(function(){ 
     $("#LichtStatus").on('appear',function() { 
     alert("appeared"); 
     }); 
     $("#LichtStatus").on('disappear', function() { 
     alert("disappeared"); 
     }); 
     $("#LichtStatus").appear(); 
     }); 

     </script> 

     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh"> 

    </body> 
</html>

的工作示例

https://plnkr.co/edit/YbBNxsWNFc4vP3OEBeCm

警报检查plunker将发射和图像来观察口内和向上滚动时图像离开视

来源

2016-11-16 14:44:13 Deep

jQuery.appear根本不工作

回答

相关问题