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'); 
    }); 
}); 

或者尝试你的脚本代码替换到结束标记。