0

试图解决这个问题很久，jsfiddle不会重新生成这段代码来显示问题。

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

show()使用or时不会发生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>

有解决方法吗？=)

请帮忙。谢谢。

4

1 回答 1

3

您始终可以使用.one()，它仅在第一个事件时触发。.one()但是，如果您在每次调用之间不单击，您可能仍然会遇到多个触发器.one()：

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

或者，每次使用以下命令删除处理程序.off()：

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

这也可以写成delegate附加到#containeror的语法body：

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

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

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

于 2012-04-23T18:37:43.880 回答