2015-07-24 2 views
0

Im, изучающий jQuery, и одна из первых вещей, которые я пытался изучить, заключалась в том, чтобы вызвать событие, когда я достигаю определенной точки страницы с помощью плагина Waypoint.jQuery waypoint вообще не работает

По какой-то причине все, что я пытался, не работало для меня. Поэтому я решил пойти на самые основы, но все равно не получаю его на работу

Вот что я делаю.

HTML

<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="css/styles.css"> 
    </head> 
    <body> 
     <div class="div1">1</div> 
     <div class="div2">2</div> 
     <div class="div3">3</div> 

     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="js/jquery.waypoints.min.js"></script> 
     <script src="js/test.js"</script> 
    </body> 
</html> 

CSS

.div1 { 
    height: 2000px; 
    width: 200px; 
    background-color: red; 
} 

.div2 { 
    height: 200px; 
    width: 200px; 
    background-color: blue; 
} 

.div3 { 
    height: 2000px; 
    width: 200px; 
    background-color: green; 
} 

и файл JS

$(document).ready(function(){ 
    $('.div2').waypoint(function() { 
    alert('Waypoint here');  
    }); 
}); 

Im предполагают, чтобы получить всплывающее окно, когда я достичь div2, но я не, и я изменил предупреждение для console.log, чтобы увидеть какие-либо сообщения на консоли, но я не получаю ни одного сообщения. Я не знаю, что я могу делать неправильно.

Примечание. Если я попытаюсь воспроизвести этот же код по фрагменту, он работает, но я не могу заставить его работать локально. Может кто-то пролить свет на то, что я могу делать неправильно?

$(document).ready(function(){ 
 
    $('.div2').waypoint(function() { 
 
    alert('Waypoint here');  
 
    }); 
 
});
.div1 { 
 
    height: 2000px; 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 

 
.div2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 

 
.div3 { 
 
    height: 2000px; 
 
    width: 200px; 
 
    background-color: green; 
 
}
 <div class="div1">1</div> 
 
     <div class="div2">2</div> 
 
     <div class="div3">3</div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.1.1/jquery.waypoints.min.js"></script>

ответ

0

У меня есть проверить вас код: Вы пропустили > знак в тег сценария.

<script src="js/test.js"</script> 

Заменить на

<script src="js/test.js"></script> 

Проверьте это сейчас. Решает ли ваша локальная проблема?

+0

спасибо, это работает. Теперь я должен выяснить, почему он не работает на моей главной странице. Вернитесь назад и проверьте код на другой стороне. Еще раз спасибо – user3635042

Смежные вопросы