Question

我在jquery中写了一些代码：点击一个框后，我得到了一些动画。我用代码笔运行代码，我没有任何问题。但是当我在本地服务器上尝试相同的代码时，我发现我的jquery无法运行。这是文件。

len(list_of_cakes) * len(typical_cluster_size)

/* 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);
}

我的css工作正常。我还测试了动画（没有点击，只需刷新页面），它也可以正常工作。当我点击框时没有任何反应。

Answer 1

您应该使用ready函数包装事件处理程序：

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

或者尝试将脚本标记替换为关闭正文标记。

单击时JQuery无法正常工作

1 个答案: