События 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 мс при касании ссылки.