jQuery-UI效果-双重触发事件 [英] jQuery-UI effect - double triggers event
问题描述
长时间解决这个问题，jsfiddle不会重现此代码来显示问题.
Trying to solve this one for a long time, jsfiddle wont re-produce this code to show the problem.
'click'事件在元素上被触发两次，该元素先前已使用hide()和show('slide')处理过.
'click' event is getting triggered twice on the element, which was previously processed with hide() and show('slide').
使用show()或fadeIn(1000)时不会发生；
在$(document).ready(){}中移动事件处理程序时不会发生.
Doesn't happen when using show() or fadeIn(1000);
Doesn't happen when moving event handler inside $(document).ready(){}.
我必须在元素内部的<script></script>中使用此确切的结构.
我无法更改它.
I have to use this exact structure with <script></script> inside of the element.
No way I can change it.
<!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>的内部，并绑定了同一事件.
I understand that show() does launch the inside of <script></script> once more, binding same event.
有解决方法吗? =)
请帮助.谢谢.
推荐答案
您始终可以使用.one()，它仅在第一个事件时触发.但是，如果您没有在每次对.one()的调用之间单击，就可能仍然会获得多个.one()触发器:
You can always use .one(), which only fires on the first event. But you may still end up with multiple .one() triggers if you don't click between each call to .one():
$('.download').one('click', function() {
alert('Trigger');
});
或者，每次使用.off()删除处理程序:
Or, remove the handler(s) each time with .off():
$('.download').off('click').on('click', function() {
alert('Trigger');
});
这也可以用#container或body附带的delegate语法编写:
This can also be written in the delegate syntax attached to #container or body:
$('body').off('click', '.download').on('click', '.download', function() {
alert('Trigger');
});
演示: http://jsfiddle.net/QnfMZ/1/
发生这种情况的原因是jQuery UI使用帮助器元素来创建过渡.它们在动画发生时保持正确的布局等.这些帮助器元素是使用clone()创建的，它会复制元素的html，在您的情况下，这也意味着它也会复制脚本.然后，脚本将运行，并添加第二个处理程序.过渡完成后，辅助克隆将被删除，但是您仍然需要一个额外的处理程序.
The reason this happens is that jQuery UI uses helper elements to create transitions. They maintain correct layout, etc while the animation is occuring. These helper elements are created using clone() which copies the html of the element, which in your case means it copies the script, too. The script then runs, adding a second handler. After the transition is done, the helper clone is deleted, but you are still left with an extra handler.
这篇关于jQuery-UI效果-双重触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
