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

或者尝试将脚本标记替换为关闭body标记.