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根本不工作

回答

相關問題