每次调用只切换一次jQuery动画

Animate jQuery toggle only once per call

本文关键字：一次 动画 jQuery 调用      更新时间：2023-09-26

我有一个非常复杂的系统，其中有几个AJAX调用，可以将不同的模板呈现为PHP中的其他模板。

其中一个模板是我的实体的编辑表单。这个表单被隐藏在我的网站中，直到点击一个按钮，然后触发一个jQuery toggle()，将我的网站的一部分切换到这个编辑表单。

这个工作很好，直到用户使用jQuery UI滑块在我的网站。

如果用户在滑块内导航，我的站点的某些部分将被AJAX重新加载。

当toggle()的按钮被点击时，动画就会像滑块被使用一样频繁(所以如果滑块被使用了4次，切换将动画切换出2个元素4次)。

我调试了它，找不到错误，我不能提供一个可以重建情况的jsFiddle，也不能访问该网站。点击功能只会触发一次，所以我真的无法解释为什么会发生这种情况。

值得一提的是，我有3个按钮将触发此事件:

#poi_edit_ajax将在模板中使用滑块时显示，该滑块将按AJAX呈现。

#poi_edit_first将在第一次访问站点时显示，并且每个AJAX都没有重新加载任何内容。

将显示

#poi_edit_last，以便用户可以从编辑视图返回

Javascript如下:

$("#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');
});

我不认为有人可以给我一个解决方案，只是这个信息，但这是我现在可以提供的一切，所以我的问题现在是简单的，如果有可能告诉toggle()函数从jQuery只运行动画一次点击。

我不认为jQuery one()可以用于此，因为点击事件只能在每次页面访问中使用一次。

编辑

根据注释，我尝试了是否在AJAX调用中注册多个事件处理程序，这是正确的。

解决这个问题的代码很简单: 
$("#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');
});

我只需要在再次绑定之前取消绑定listener，否则它们会卡住，多个listener会对click事件做出反应!

您可能多次绑定Click事件(通过AJAX调用加载javascript)。确保只绑定一次Click处理程序(它会触发toggle())。

看看这个答案:https://stackoverflow.com/a/969011

(稍作修改)引用该回答，供快速参考:

function alertEvent() { alert("test"); }

$(".ajax").bind("click", alertEvent);

//When you want to ensure it won't happen twice...

$(".ajax"). unbind ("click", alertEvent);

$(".ajax").bind("click", alertEvent);

此方法将只删除您指定的事件

相关文章：