Eu tenho uma página responsiva pra fazer um e-commerce e tenho o seguinte código para adicionar ou remover quantidade:
// HTML
<a class="menos" class='fas fa-minus-circle'><i></i></a>
<p class="qtde">0</p>
<a class="mais" class='fas fa-minus-circle'><i></i></a>
// jQuery (estou usando o jQuery comum e não o jQuery mobile):
$(document).on('click', '.menos', function() {
// Retira quantidade
});
$(document).on('click', '.mais', function() {
// Soma quantidade
});
No PC e em celulares android funcionou. No iPhone não funcionou nem no Safari e nem no Chrome.
Em outros posts aqui no fórum sugeriram adicionar ao click a função touchstart e também usar mousedown no lugar do click e ficou assim:
$(document).on('click touchstart', '.mais', function() {
// Soma quantidade
});
// ou
$(document).on('mousedown touchstart', '.mais', function() {
// Soma quantidade
});
No PC normal.
No Android ele executou a função duas vezes seguidas (0-2-4 ...).
No iPhone aí que está, funcionou num iPhone X tanto no Safari quanto no Chrome mas não funcionou num iPhone 7 Plus tanto no Safari quanto no Chrome, todos os dispositivos estão atualizados e com os apps na mesma versão.
Como posso proceder?
button
no lugar dea
. A taga
é usada para navegação e não para alterar elementos.