点击跑两次

Question

http://jsfiddle.net/uTV5k/19/

你好,

我正在使用以下脚本在我的移动网站。请看模拟脚本和标记的篡改。

下面的脚本正是我的移动站点上的脚本，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/。

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