动画jQuery每次调用仅切换一次 [英] Animate jQuery toggle only once per call
问题描述
我有一个非常复杂的系统，其中包含几个AJAX调用，这些调用将不同的模板呈现为PHP中的其他模板.
I have a pretty complex system with a few AJAX calls which render different templates into other templates in PHP.
这些模板之一是我的实体的编辑表单.将此表单隐藏在我的网站中，直到单击一个按钮为止，然后它将触发jQuery toggle()以为此编辑表单切换出我的网站的一部分.
One of these templates is a edit form for my entity. This form is rendered hidden into my website until a button was clicked, which will then fire a jQuery toggle() to switch out a part of my site for this edit form.
这很好，直到用户在我的网站上使用jQuery UI滑块为止.
This works fine until the user is using the jQuery UI slider on my site.
如果用户在滑块中导航会发生什么，就是我的网站的部分将重新加载AJAX.
What happens if the user navigates within the slider is that parts of my site will be reloaded with AJAX.
单击toggle()的按钮时，动画的使用时间与使用滑块的频率相同(因此，如果使用滑块4次，则切换将使2个元素动画化4次).
When the button for the toggle() then will be clicked the animation goes of as often as the slider was used (so if the slider was used 4 times the toggle will animate an switch out the 2 elements 4 times).
我对其进行了调试，找不到错误，我无法提供jsFiddle来重建情况，也无法提供对该网站的访问权限.点击功能只会被触发一次，所以我真的无法解释为什么会发生这种情况.
I debugged through it and couldn't find the mistake, i can't provide a jsFiddle which could rebuild the situation nor can i give access to the site. The click function will be fired only once, so i really can't explain why this is happening.
要提到的是，我有3个按钮将触发此事件:
To mention is that i have 3 buttons which will trigger this event:
#poi_edit_ajax将在按AJAX呈现的模板中使用滑块时显示.
#poi_edit_ajax will be shown when the slider was used in the template which will be rendered per AJAX.
#poi_edit_first将通过首次访问该网站显示，并且每个AJAX都不会重新加载任何内容.
#poi_edit_first will be shown by first access to the site and nothing has been reloaded per AJAX.
#poi_edit_last将会显示，以便用户可以从编辑视图中回来
#poi_edit_last will be shown so the user can come back from the edit view
JavaScript如下:
The Javascript is the following:
$("#poi_edit_ajax").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_first").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_last").click(function(){
$(".toggle_edit").toggle('slow');
});
我认为没有人可以仅凭此信息为我提供解决方案，但这就是我现在所能提供的一切，所以我现在的问题很简单，就是是否有可能告诉jQuery中的toggle()函数是否只能运行动画一次点击.
I don't think that somebody can give me a solution with just this information, but that's everything i can provide now, so my Question now is simply if it is possible to tell the toggle() function from jQuery to only run the animation ONCE PER CLICK.
我认为jQuery one()不能用于此目的，因为click事件只能在每个页面访问中使用一次.
I don't think that jQuery one() can be used for this, because so the click event could only be used once per pagevisit.
编辑
根据评论，我尝试了是否将在AJAX调用中注册多个事件处理程序，这是真的.
According to the comment, i tried out if multiple event handlers will be registered within the AJAX calls, which is true.
解决此问题的代码很简单:
The code to fix this is simple:
$("#comment_first").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_last").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_ajax").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
我只需要取消绑定Lister才能再次绑定它，否则它们将被卡住，并且多个监听器将对click事件做出反应！
I just need to unbind the Lister before bind it again, else they're gonna stuck and multiple Listeners will react to the click event!
推荐答案
您可能多次绑定了Click事件(通过AJAX调用加载javascript).确保只绑定一次Click处理程序(触发toggle())一次.
You are probably binding the Click event multiple times (by loading javascript through the AJAX calls). Make sure you bind the Click handler (which triggers the toggle()) only once.
看看这个答案: https://stackoverflow.com/a/969011
该答案的引号(略作修改)，以供快速参考:
function alertEvent() { alert("test"); }
$(".ajax").bind("click", alertEvent);
//When you want to ensure it won't happen twice...
$(".ajax"). 取消绑定 ("click", alertEvent);
$(".ajax").bind("click", alertEvent);
此方法只会删除您指定的事件
This method will only remove the event you specify
这篇关于动画jQuery每次调用仅切换一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
