Jquery.click() не работает в iOS

HTML:

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS:

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

Теперь этот script отлично работает в моем браузере для ПК, но он не работает на iOS. Я тоже пробовал это решение: $(document).click() не работает корректно на iPhone. jquery, но он не работает.

Я использую jQuery 1.8.3, нет jQuery Mobile (я не хочу).

Кто-нибудь может мне помочь?

ОТВЕТЫ

Ответ 1

Попробуйте добавить курсор указателя к кнопке и использовать .on для привязки события клика

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault()
    alert('button1');
});

Ответ 2

Я сталкивался с этим: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

Короче говоря, одно из этих условий должно быть выполнено для браузеров iOS, чтобы генерировать события щелчка от touch-событий:

  1. Целевым элементом события является ссылка или поле формы.
  2. Целевой элемент или любой из его предков, вплоть до <body>, но не включающий в себя, имеет явный обработчик событий, установленный для любого из событий мыши. Этот обработчик событий может быть пустой функцией.
  3. Целевой элемент или любой из его предшественников, включая документ, имеет курсор: CSS-объявления указателя.

Ответ 3

Общее решение может быть примерно таким:

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}

Ответ 4

Ответ Якудзо является наиболее исчерпывающим. Но я хочу добавить 4-й трюк (мой любимый):

$('div:first').on('click', $.noop);

И не имеет значения, является ли первый div родителем вашего целевого элемента или нет!

Ответ 5

Самое простое решение этой проблемы - просто добавить cursor: pointer; к стилю (CSS) элемента, на который вы нацеливаетесь.

#button1 {
    cursor: pointer;
}

В качестве альтернативы, это может быть добавлено в строку:

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>