Question

您好，

我在移动网站上使用以下脚本。请参阅模拟脚本和标记的jsfiddle。

下面的脚本正是我手机网站上的内容，js小提琴就是它的复制品。

在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中使用它不应该导致任何问题吗？

提前致谢

Answer 1

首先：窗口加载发生

你正在打电话

.trigger("resize");

在点击时激活绑定。

later on - 如果窗口加载再次发生 - 它再次重新触发代码 - 重新绑定点击

Answer 2

您的小提琴代码与实时代码之间的区别在于调整大小/方向处理程序的存在。

所有其他代码都在其中，意味着每次运行调整大小处理程序时它都会运行。 http://jsfiddle.net/uTV5k/20/是你回头的那个小提琴的变种。它行为不端。

您可以在使用.off('click')添加新点击处理程序之前删除旧的点击处理程序来解决此问题。

这个小提琴包含此更新，似乎再次表现出来：http://jsfiddle.net/uTV5k/21/

解决此问题的另一种（也可能是更好的）方法是重新计算调整大小时所需的值，并在全局范围内更多地存储它们。然后可以添加一次您的单击函数并引用这些全局值。这是一个更大的代码重写，我只是为了突出你的问题而进行了非常简单的修复。

点击运行两次

2 个答案: