JQuery не работает с ipad
У нас есть веб-приложение, которое использует JQuery blockUI, чтобы открыть всплывающее окно и сделать некоторые действия. Все это отлично работает на Safari, а проблема IE 8. - с Ipad. ни одно из действий во всплывающем окне не отвечает. он просто остается на этой странице. даже если близко не работает.
нам нужно добавить что-нибудь еще?
вот код, который открывает страницу и нажмите событие для закрытия.
<script>
$(document).ready(function() {
$.ajaxSetup( {
cache:false
});
$("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
$.blockUI({ message: $('#sendInviteDiv'),
centerY: 0,
css: {
top: ($(window).height() - 550) /2 + 'px',
left: ($(window).width() - 870) /2 + 'px',
width: '870px'
}
});
//var ua = navigator.userAgent;
//var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
//alert(ua);
$('#closeInvite').click($.unblockUI);
$('#inviteBtn').click(function() {
//script to load
//setPositionDetails('${formName}','inviteBtn');
});
}
});
</script>
оценить указатели.
javascript включен, а всплывающие окна разрешены в настройках Ipad Safari.
Ответы
Ответ 1
Я обычно использую
.bind("click touchstart", function(){
});
вместо:
.click(function(){
});
Таким образом вы привязываете правильное событие. Он также быстрее, прикосновение реагирует гораздо быстрее, чем щелчок по какой-то причине.
Ответ 2
Я знаю, что это было задано давно, но я нашел ответ, ища этот точный вопрос.
Существует два решения.
Вы можете установить пустой атрибут onlick в элементе html:
<div class="clickElement" onclick=""></div>
Или вы можете добавить его в css, установив курсор указателя:
.clickElement { cursor:pointer }
Проблема в том, что на ipad первый щелчок на неядерном элементе регистрируется как зависание. На самом деле это не ошибка, потому что это помогает с сайтами, которые имеют меню hover, которые не были оптимизированы для планшетов/мобильных устройств. Установка курсора или добавление пустого атрибута onclick сообщает браузеру, что этот элемент действительно является областью, доступной для кликов.
(через http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working)
Ответ 3
ОБНОВЛЕНИЕ: я переключил .bind
на .on
потому что теперь это предпочтительный способ, говорит jQuery.
Начиная с jQuery 1.7, метод .on()
является предпочтительным методом для прикрепления обработчиков событий к документу. jquery.com
ПРИМЕР:
$('.button').on("click touchstart", function() {
});
Ниже приведена окончательная версия события click
и touchstart
поскольку оно по-прежнему срабатывает даже с новыми объектами DOM, которые добавляются после загрузки DOM. Включение этого окончательного решения события щелчка для любого сценария.
$(document).on("click touchstart", ".button", function () {
});
Ответ 4
Используйте вместо этого функцию bind
.
Сделайте его более дружелюбным.
Пример:
var clickHandler = "click";
if('ontouchstart' in document.documentElement){
clickHandler = "touchstart";
}
$(".button").bind(clickHandler,function(){
alert('Visible on touch and non-touch enabled devices');
});
Ответ 5
Благодаря предыдущим комментариям я обнаружил, что для меня все работало:
Либо добавление заглушки onclick к элементу
onclick="void(0);"
или пользовательский стиль указателя курсора
style="cursor:pointer;"
или как в моем существующем коде, мне нужен код jquery tap
$(document).on('click tap','.ciAddLike',function(event)
{
alert('like added!'); // stopped working in ios safari until tap added
});
Я добавляю перекрестную ссылку обратно в Apple Docs для тех, кто интересуется.
См. Apple Docs: внесение событий в число кликов
(Я точно не знаю, когда мое гибридное приложение перестало обрабатывать клики, но, похоже, я помню, что они работали с iOS 7 и более ранними версиями.)
Ответ 6
на самом деле, это оказалось пару изменений javascript в коде.
вызов метода javascript с; в конце.
размещение тегов script в теле вместо головы.
и интересно даже изменить отображаемый текст (пожалуйста, "click") на то, что не является событием. поэтому Пожалуйста, оцените и т.д.
отключил отладчик на сафари, он не давал много информации или даже ошибок в разы.
Ответ 7
Вероятно, вместо того, чтобы определять, как события кликают и касаются, вы можете определить обработчик, который будет выглядеть, если устройство будет работать с кликом или касанием.
var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});
Ответ 8
У нас есть аналогичная проблема: событие click на кнопке не работает, если пользователь не прокрутил страницу. Ошибка появляется только на iOS.
Мы решили это, немного прокрутив страницу:
$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);
(Это не отвечает на конечную причину. Возможно, какая-то ошибка в Safari mobile?)
Ответ 9
У меня был промежуток, который создавал бы всплывающее окно. Если бы я использовал "click touchstart", это вызовет части всплывающего окна во время касания. Я исправил это, сделав span "click touchhend".
Ответ 10
Я обнаружил, что когда я сделал привязку более конкретной, она начала работать на iOS. Я имел:
$(document).on('click tap', 'span.clickable', function(e){ ... });
Когда я изменил это на:
$("div.content").on('click tap', 'span.clickable', function(e){ ... });
iOS начала отвечать.
Ответ 11
Ни одно из утвержденных решений не сработало для меня. Вот что в итоге сработало:
Я переместил код, который был в $(document).ready
out, если он не требовался в готовом документе. Если необходимо иметь его в готовом документе, тогда вы перемещаете этот критический код в jQuery(window).load()
.