JQuery не работает при нажатии

Question

Я написал некоторый код в jquery: после нажатия окна я получаю анимацию. Я запустил код в коде, и у меня нет никаких проблем. Но когда я попробовал тот же код на своем локальном сервере, я увидел, что мой jquery не работает. Вот файлы.

/* JSTransition.js */ 
 
$('.trigger').on('click', function(){ 
 
    $(this).toggleClass('clicked'); 
 
});

body { 
 
    padding: 50px; 
 
} 
 

 
.trigger { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 20px solid #999; 
 
    background: #ddd; 
 
} 
 

 
.box { 
 
    display: inline-block; 
 
    background: pink; 
 
    width: 200px; 
 
    height: 200px; 
 
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97), -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    pointer-events: none; 
 
} 
 

 
.trigger.clicked .box { 
 
    -webkit-transform: translate(200px, 150px) rotate(20deg); 
 
      transform: translate(200px, 150px) rotate(20deg); 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="JSTransition.js"></script> 
 
<div class="trigger"> 
 
    <div class="box"></div> 
 
</div>

Мой CSS работает отлично. Я также тестировал анимацию (без кликов, просто обновляя страницу), и она отлично работает. Когда я нажимаю кнопку, ничего не происходит.

Answer 1

Вы должны обернуть обработчик события с ready функции:

$(document).ready(function(){ 
    $('.trigger').on('click', function(){ 
     $(this).toggleClass('clicked'); 
    }); 
}); 

Или попробуйте заменить сценарий тег закрывающий тег тела.