单击运行两次
您好，
我正在我的移动网站。请参阅模拟脚本和标记的jsfiddle。
下面的脚本正是我的移动网站上的脚本，js fiddle 是它的复制品。
在 jsfiddle 中，点击交替效果很好。第一次单击打开动画，第二次单击关闭动画。
我的移动网站上的问题，第一次点击打开动画，第二次动画在没有第二次点击后立即运行。但在小提琴中它运行正常。
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-mod').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = false;
$(this).find('.mod-info').css("top", homeStart + "px");
$(this).on('click', function () {
if (homeOpen) {
// second click alternation
$(this).find('.mod-info').animate({ top: homeStart + "px" });
homeOpen = false;
} else {
// first click alternation
$(this).find('.mod-info').animate({ top: 0 });
homeOpen = true;
}
});
});
}).trigger("resize");
});
我真的不确定为什么会发生这种情况。在 iScroll 中使用它不会引起任何问题，不是吗？
提前致谢
Hello,
I am using the below script on my mobile site. Please see the jsfiddle of simulated script and markup.
The script below is exactly what's on my mobile site, and the js fiddle is a replicate of it.
In the jsfiddle, the click alternations work fine. The first click opens the animation, and the second click closes the animation.
The problem on my mobile site, the first click opens the animation, and the second animation runs immediately after with-out a second click. But in the fiddle it runs OK.
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-mod').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = false;
$(this).find('.mod-info').css("top", homeStart + "px");
$(this).on('click', function () {
if (homeOpen) {
// second click alternation
$(this).find('.mod-info').animate({ top: homeStart + "px" });
homeOpen = false;
} else {
// first click alternation
$(this).find('.mod-info').animate({ top: 0 });
homeOpen = true;
}
});
});
}).trigger("resize");
});
I'm really not sure why this would be happening. Using this in iScroll shouldnt cause any problems should it?
Thanks in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先：
您正在调用
窗口加载，这会激活单击绑定。
稍后- 如果窗口加载再次发生 - 它会重新触发代码，再次 - 重新绑定点击firstly : window load happens
you are calling
which activates the bind on click.
later on- if the window load happens again - it retrigger the code which again - re bind the click小提琴代码和实时代码之间的区别在于调整大小/方向处理程序的存在。
所有其他代码都在这意味着每次运行调整大小处理程序时都会运行它。 http://jsfiddle.net/uTV5k/20/ 是您的小提琴的变体，带有该处理程序它的行为很糟糕。
您可以通过在使用
.off('click')添加新点击处理程序之前删除旧的点击处理程序来解决此问题。此小提琴包含此更新并且似乎再次表现： http://jsfiddle.net/uTV5k/21/
解决此问题的另一种（可能是更好的）方法是重新计算调整大小时所需的值并将它们更全局地存储。然后您的点击函数可以添加一次并引用这些全局值。这是一个更大的代码重写，我只是进行了非常简单的修复来突出您的问题。
The difference between your fiddle code and your live code is the presence of the resize/orientation handler.
All your other code is inside that meaning that it will get run every time your run your resize handler. http://jsfiddle.net/uTV5k/20/ is a variant of your fiddle with that handler back in. It misbehaves badly.
You can fix this by removing the old click handlers before adding the new ones using
.off('click').This fiddle includes this update and seems to behave again: http://jsfiddle.net/uTV5k/21/
The other (and possibly better) way of fixing this issue is to just recalculate the values you need to in the on resize and store them more globally. Then your click functions can be added once and refer to these global values. This is a much bigger code rewrite and I just went for the very simple fix to highlight your problem.