События jQuery, не работающие в iOS

Второе обновление: Похоже, что одна из моих функций (resetFigures) мешала обработчику событий, поэтому перемещение этого конца в конец функции привязки было отсортировано.

Обновление: Я понял после некоторого базового тестирования, который регистрировал события кликов, просто он не может переворачиваться при нажатии.

У меня есть базовая эстетическая функциональность моего сайта, работающего в Chrome и Firefox, но он отказывается вести себя правильно на iOS (тест на iPhone 4 с iOS 6.1 и iPad с iOS 4.3.5).

Вы можете просмотреть сайт и, конечно, скрипты (main.js) здесь: http://bos.rggwebdesigns.com/

Я читал, что iOS не обрабатывает события jQuery правильно, но я изо всех сил пытаюсь выяснить, исправить. Пара потоков здесь, в Stack Overflow, упоминала метод live(), но реализация его, как и далее (а также добавление onclick="" к элементам, доступным для кликов), как представляется, не работает:

$('.card').live('click touchstart', function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

Я также наткнулся на этот интересный проект: http://aanandprasad.com/articles/jquery-tappable/. Однако мне тоже не повезло:

$('.card').tappable(function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

Также, пожалуйста, исправьте меня, если я ошибаюсь, но, согласно этому сайту, 3D-преобразования поддерживаются в iOS с соответствующими префиксами: http://caniuse.com/transforms3d

Ответ 1

Существует проблема с тем, что iOS не регистрирует события click/touch, связанные с элементами, добавленными после загрузки DOM.

В то время как у PPK есть этот совет: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Я нашел это простое исправление, просто добавьте его в css:

cursor: pointer;

Ответ 2

Недавно, работая над веб-приложением для клиента, я заметил, что любые события кликов, добавленные в элемент, не связанный с якорем, не работают на iPad или iPhone. Все настольные и другие мобильные устройства отлично работали - но поскольку продукты Apple являются самыми популярными мобильными устройствами, важно было зафиксировать их.

Оказывается, любой элемент привязки, назначенный обработчику кликов в jQuery, должен либо иметь атрибут onClick (может быть пустым, как показано ниже):

onClick=""

ИЛИ

Элемент css должен иметь следующее объявление:

cursor:pointer

Странно, но это то, что нужно, чтобы снова работать!
источник: http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

Ответ 3

Вы должны привязать событие крана, клик не существует на мобильном сафари или в UIWbview. Вы также можете использовать этот polyfill, чтобы избежать задержки 300 мс при касании ссылки.