На клик работает дважды

Question

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

Привет,

Я использую приведенный ниже скрипт на своем мобильном сайте. Пожалуйста, посмотрите 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 не должно вызвать каких-либо проблем, не так ли?

заранее спасибо

Answer 1

Во -первых: загрузка окна происходит

ты звонишь

.trigger("resize");

который активирует привязку по клику.

later on - если загрузка окна происходит снова - он повторно запускает код, который снова - повторно связывает щелчок

Answer 2

Разница между вашим скриптовым кодом и вашим живым кодом заключается в наличии обработчика изменения размера / ориентации.

Весь ваш другой код находится внутри этого значения, что означает, что он будет запускаться каждый раз, когда вы запускаете обработчик изменения размера. http://jsfiddle.net/uTV5k/20/ - это вариант вашей скрипки с этим обработчиком. Он плохо себя ведет.

Вы можете исправить это, удалив старые обработчики кликов перед добавлением новых, используя .off('click'),

Эта скрипка включает в себя это обновление и, похоже, ведет себя снова: http://jsfiddle.net/uTV5k/21/

Другой (и, возможно, лучший) способ решения этой проблемы - просто пересчитать значения, которые вам нужны, при изменении размера и сохранить их более глобально. Затем ваши функции щелчка могут быть добавлены один раз и ссылаться на эти глобальные значения. Это гораздо больше, переписать код, и я просто решил очень просто исправить вашу проблему.