Come far funzionare la mia funzione "click" con iOS

Question

Ho un set di Div che agisce da pulsanti. Questi pulsanti hanno una semplice funzione click() jquery che funziona in tutti i browser ad eccezione di iOS.

Ad esempio:

<div class="button">click me</div> 

e

$('.button').click(function(){ 

    alert('hi'); 

}); 

Io non sono sicuro perché questo non funziona su iOS - chiaramente non v'è alcun 'click' in iOS.

Purtroppo non ho un dispositivo iphone per testarlo da solo, ma ricevo molte lamentele dai miei clienti che vogliono fare clic su cose e non succede nulla.

Qual è la chiave per ottenere questo funzionamento?

Answer 1

Click ": significa che quando un mousedown e l'evento MouseUp si verificano sullo stesso elemento o un elemento viene attivato dalla tastiera

da Jquery Bug, c'è lavoro in giro, basta aggiungere "cursor: pointer" ai CSS dell'elemento e l'evento click. . funzionerà come previsto e si può anche vedere questo Jquery click on Ios aiuto

Answer 2

È possibile utilizzare questo:

$('button').bind("touchstart", function(){ 
    alert('hi'); 
}); 

Un'altra soluzione è quella di impostare il cursore dell'elemento puntatore e funziona con jQuery live e clicca evento. Impostalo in CSS.

Answer 3

In realtà, la risposta accettata non ha funzionato per me. Ho provato a usare "cursor: pointer", onclick = "", e persino convertire l'elemento in un anchor tag.

Quello che ho fatto per farlo funzionare è associare l'evento touchstart all'evento click. Per farlo funzionare su tutte le piattaforme ho dovuto a uno spoofing ua brutto come questo:

var ua = navigator.userAgent, 
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

jQuery("body").on(event, '.clickable_element', function(e) { 
    // do something here 
}); 

Answer 4

Sulla base di Marek's answer questo è il mio prendere su di esso (è un po 'ripulito):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

C'è ancora un sacco di lavoro da fare per l'industria quando si tratta di norme ...

EDIT:

non ha funzionato su E telefoni roid. Prese un approccio più rigido:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' } 
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' } 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

Answer 5

anche basato su Marek's answer, che adatta l'evento al dispositivo di sparare una funzione, qui è un codice che costringono a sparare un clic su dispositivi IOS, dove c'è prima un TouchStart evento:

var UA = navigator.userAgent, 
iOS = !!(UA.match(/iPad|iPhone/i)); 

if (iOS) { 
    $(document).on('touchstart', function (e) { 
     e.target.click(); 
    }); 
}