Question

试图长时间解决这个问题，jsfiddle不会重新生成此代码来显示问题。

'click'事件在元素上被触发两次，之前使用hide（）和show（'slide'）进行处理。

使用show()或fadeIn(1000)时不会发生; 在$(document).ready(){}内移动事件处理程序时不会发生。

我必须在元素内部使用<script></script>这个确切的结构。我无法改变它。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href='/styles/jquery-ui-1.8.18.custom.css' rel='stylesheet' type='text/css'>
<script src='/js/jquery.js' type='text/javascript'></script>
<script src='/js/jquery-ui-1.8.18.custom.js' type='text/javascript'></script>
<script type='text/javascript'>
  $(document).ready(function() {
    $('#container').hide().delay(750).show('slide');
  });
</script>
</head>
<body>

<div id='container'>
  <div class='download'>Download</div>
  <script type='text/javascript' id='js4container'>
    $('.download').click(function() {
      alert('Trigger');
    });
  </script>
</div>

</body>
</html>

我了解show()确实再次启动<script></script>内部，绑定同一事件。

有解决方法吗？ =）

请帮忙。感谢。

Answer 1

您始终可以使用.one()，它仅在第一个事件中触发。但是，如果您在每次调用.one()之间没有点击，则最终可能会有多个.one()触发器：

$('.download').one('click', function() {
     alert('Trigger');
});

或者，每次使用.off()：

删除处理程序

$('.download').off('click').on('click', function() {
     alert('Trigger');
});

这也可以用delegate或#container附带的body语法编写：

$('body').off('click', '.download').on('click', '.download', function() {
     alert('Trigger');
});

演示：http://jsfiddle.net/QnfMZ/1/

发生这种情况的原因是jQuery UI使用辅助元素来创建转换。在动画发生时，它们保持正确的布局等。这些辅助元素是使用clone()创建的，它复制元素的html，在您的情况下，它也意味着它复制脚本。然后运行脚本，添加第二个处理程序。转换完成后，将删除辅助克隆，但您仍然需要一个额外的处理程序。

jQuery-UI效果 - 双触发事件

1 个答案: