Jquery does not work in the Mobile Browser

Question

I have a responsive page to make an e-commerce and have the following code to add or remove quantity:

// 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
});

On PC and android phones worked. No iPhone worked on Safari or Chrome.

In other posts here in the forum suggested to add to the click the touchstart function and also use mousedown instead of click and it was like this:

$(document).on('click touchstart', '.mais', function() {
    // Soma quantidade
});
// ou
$(document).on('mousedown touchstart', '.mais', function() {
    // Soma quantidade
});

On the regular PC.

On Android he ran the function twice in a row (0-2-4 ...).

On the iPhone there, it worked on an iPhone X in both Safari and Chrome but it didn’t work on an iPhone 7 Plus in both Safari and Chrome, all devices are up to date and apps in the same version.

How can I proceed?

Answer 1

You’ll probably have to use jQuery Mobile. To prevent the execution from happening again, add a preventDefault() and stopPropagation()

$(document).on('click touchstart', '.mais', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

An alternative is to use Javascript itself:

<div class="menos" ontouchstart="touchStart(menos);"><i class='fas fa-minus-circle'></i></div>
<p class="qtde">0</p>
<div class="mais" ontouchstart="touchStart(mais);"><i class='fas fa-minus-circle'></i></div>

element.addEventListener("touchstart", touchStart, false);

function touchStart(event) {
  // executa o evento
}