jQuery UI效果-双触发器事件_Jquery_Jquery Ui

jQuery UI效果-双触发器事件

jquery jquery-ui

jQuery UI效果-双触发器事件,jquery,jquery-ui,Jquery,Jquery Ui,为了长期解决这个问题，JSFIDLE不会重新生成此代码来显示问题元素上的“单击”事件被触发两次，该元素以前是通过hide（）和show（'slide'）处理的使用show（）或fadeIn（1000）时不会发生；在$（document.ready（）{}内移动事件处理程序时不会发生我必须在元素内部使用这个确切的结构。我无法更改它。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T

为了长期解决这个问题，JSFIDLE不会重新生成此代码来显示问题

元素上的“单击”事件被触发两次，该元素以前是通过hide（）和show（'slide'）处理的

使用

show（）

或

fadeIn（1000）

时不会发生；在

$（document.ready（）{}

内移动事件处理程序时不会发生

我必须在元素内部使用这个确切的结构。我无法更改它。

<!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>


$（文档）.ready（函数（）{
$（“#容器”）.hide（）.delay（750.show（'slide'）；
});
下载
$（'.download'）。单击（函数（）{
警报（“触发器”）；
});

我知道

show（）

会再次启动

的内部，绑定相同的事件

有解决办法吗？=）

请帮忙。谢谢。

您始终可以使用

.one（）

，它只在第一个事件时触发。但是，如果在每次调用

.one（）

之间不单击，可能仍然会导致多个

.one（）

触发器：

或者，每次使用

.off（）

移除处理程序：

这也可以用

容器

或

主体

所附的

委托

语法编写：

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

演示：

发生这种情况的原因是jqueryui使用helper元素来创建转换。它们在动画发生时保持正确的布局等。这些helper元素是使用
clone（）
创建的，它复制元素的html，在您的例子中，这意味着它也复制脚本。然后运行脚本，添加第二个处理程序。转换完成后，助手克隆将被删除，但您仍有一个额外的处理程序。
您始终可以使用
.one（）
，它仅在第一个事件时触发。但是，如果在每次调用
.one（）
之间不单击，可能仍然会导致多个
.one（）
触发器：
或者，每次使用
.off（）
移除处理程序：
这也可以用
容器
或
主体
所附的
委托
语法编写：

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

发生这种情况的原因是jqueryui使用helper元素来创建转换。它们在动画发生时保持正确的布局等。这些helper元素是使用
clone（）
创建的，它复制元素的html，在您的例子中，这意味着它也复制脚本。然后运行脚本，添加第二个处理程序。转换完成后，助手克隆将被删除，但您仍然有一个额外的处理程序。
p.S.我很好奇，到底是什么导致了双重攻击。当我试图在JSFIDLE中创建这种情况时，简单地显示和隐藏容器似乎不会导致这种行为。是其他原因造成的吗？没有其他原因。只是我提供的代码。复制粘贴并运行-复制此问题。想知道为什么常规的show（）或fadeIn-效果很好。我同意hide和show与元素的任何事件处理程序都不相关。jQuery UI bug？嗯，有些转换是使用克隆帮助器元素创建的。克隆元素时，它会再次运行脚本，从而导致再次附加处理程序，即使在转换后删除了克隆。这是我的猜测。您使用的jQuery版本是什么？总是最新的。1.7.2. 如果克隆导致处理程序重复，那么添加unbind（）可以解决该问题吗？好吧，事实并非如此$（“#容器”）.hide（）.delay（750）.unbind（）.show（'slide'）；关闭（'click'）。打开（'click'）-工作。这是唯一的处理方法吗另外，我很好奇到底是什么导致了这场双重火灾。当我试图在JSFIDLE中创建这种情况时，简单地显示和隐藏容器似乎不会导致这种行为。是其他原因造成的吗？没有其他原因。只是我提供的代码。复制粘贴并运行-复制此问题。想知道为什么常规的show（）或fadeIn-效果很好。我同意hide和show与元素的任何事件处理程序都不相关。jQuery UI bug？嗯，有些转换是使用克隆帮助器元素创建的。克隆元素时，它会再次运行脚本，从而导致再次附加处理程序，即使在转换后删除了克隆。这是我的猜测。您使用的jQuery版本是什么？总是最新的。1.7.2. 如果克隆导致处理程序重复，那么添加unbind（）可以解决该问题吗？好吧，事实并非如此$（“#容器”）.hide（）.delay（750）.unbind（）.show（'slide'）；关闭（'click'）。打开（'click'）-工作。这是唯一的处理方法吗特定引擎。使用AJAX加载部分代码。对此无能为力。另外，结构不是问题，jQueryUI肯定有问题。只需hide（）和show（）不应导致事件出现任何问题。特定于引擎。使用AJAX加载部分代码。对此无能为力。另外，结构不是问题，jQueryUI肯定有问题。只需hide（）和show（）不应引起任何事件问题。
$('body').off('click', '.download').on('click', '.download', function() { alert('Trigger'); });