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

thatsのビューポートを離れたときの画像は、ビューポート内とスクロールアップに来ます...多くの '
'タグは、CSSがうまくいかないでしょうか？ –

jQueryセレクタに一致する要素がないため、 'appear'イベントや' disappear'イベントはバインドされません。このJavaScriptは実行時に効果的に何もしません。 – David

セレクタ '[id^= light]'がこれを見つけることができません 'id =" LichtStatus "' ...なぜでしょうか...おそらくタイプミスでしょうか？ ;） –

DOMがロードされていることを確認できるように、ドキュメントの中にコードを入れてください。また、要素を@Louys Patrice Bessetteとして指定します。 @Deepが得意とするappearコールを追加しました。

<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>

私は、アラートが上記のコードで2回表示されることがわかりました。下のコードを変更した後、警告が2回表示されないことに気付きました。

$(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

（docの準備ができています）... $（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>

取り組ん例えばチェックplunker

https://plnkr.co/edit/YbBNxsWNFc4vP3OEBeCm

あなたはスクロールダウンしたらアラートが発射されますと画像が

出典

2016-11-16 14:44:13 Deep

jQuery.appearは単に動作しません

答えて

関連する問題