web-dev-qa-db-fra.com

Jquery click ne fonctionne pas avec ipad

nous avons une application Web qui utilise Jquery blockUI pour ouvrir une fenêtre contextuelle et effectuer des actions. Tout cela fonctionne bien sur Safari et le problème IE 8. concerne Ipad. aucune des actions dans pop up ne répond. il reste juste sur cette page. Même fermer ne fonctionne pas . avons-nous besoin d'ajouter quelque chose d'autre?.

<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>

apprécier les pointeurs.

javascript est activé et les popups sont autorisés dans les paramètres d'Ipad Safari. 

jqueryipadsafari
37
Atchuta Vani

J'utilise habituellement 

.bind("click touchstart", function(){

});

au lieu de:

.click(function(){

});

De cette façon, vous liez le bon événement. C'est aussi plus rapide, le toucher répond beaucoup plus rapidement que le clic pour une raison quelconque.

81
Rich Bradshaw

Je sais que cela a été demandé il y a longtemps, mais j'ai trouvé une réponse en cherchant cette question précise.

Il y a deux solutions.

Vous pouvez soit définir un attribut onlick vide sur l'élément html:

<div class="clickElement" onclick=""></div>

Ou vous pouvez l'ajouter en css en plaçant le curseur du pointeur:

.clickElement { cursor:pointer }

Le problème est que sur ipad, le premier clic sur un élément non-ancre est enregistré comme un survol. Ce n'est pas vraiment un bug, car cela aide les sites qui ont des menus survolés qui n'ont pas été optimisés pour les tablettes/mobiles. Le fait de placer le curseur ou d’ajouter un attribut onclick vide indique au navigateur que l’élément est effectivement une zone cliquable.

(via http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working )

34
lachie_h

UPDATE: J'ai changé .bind en .on parce que c'est maintenant le moyen préféré, dit jQuery.

Depuis jQuery 1.7, la méthode .on() est la méthode recommandée pour attacher des gestionnaires d'événements à un document. jquery.com

EXEMPLE: 

$('.button').on("click touchstart", function() {

});

Vous trouverez ci-dessous la version finale de l'événement click et touchstart car il se déclenche même avec les nouveaux objets DOM ajoutés après le chargement du DOM. Incorporation de cette solution d’événement de clic ultime pour tous les scénarios. 

$(document).on("click touchstart", ".button", function () {

});
22
BBi7

Utilisez la fonction bind à la place de . Rendez-la plus conviviale.

Exemple:

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});
7
Samson

Grâce aux commentaires précédents, j'ai trouvé que tout ce qui suit fonctionnait pour moi:

Soit ajouter un talon onclick à l'élément

onclick="void(0);"

ou utiliser un style de pointeur de curseur

style="cursor:pointer;"

ou comme dans mon code existant, mon code jquery était nécessaire tap ajouté

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

J'ajoute une référence croisée aux documents Apple Docs pour les personnes intéressées .. Voir Apple Docs: Rendre les événements cliquables

(Je ne sais pas exactement quand mon application hybride a cessé de traiter les clics, mais il semble que je me souvienne qu'ils utilisaient iOS 7 ou une version antérieure.)

2
Anthony De Souza

J'ai eu une durée qui créerait un popup. Si j'utilisais "click touchstart", cela déclencherait des parties de la popup lors du touchend J'ai corrigé cela en faisant le span "click touchend".

0
Luke Wenke

J'ai constaté que lorsque ma liaison était plus spécifique, cela commençait à fonctionner sur iOS. J'ai eu:

$(document).on('click tap', 'span.clickable', function(e){ ... });

Quand je l'ai changé pour:

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

iOS a commencé à répondre.

0
djbp

Nous avons un problème similaire: l'événement de clic sur un bouton ne fonctionne pas tant que l'utilisateur n'a pas fait défiler la page. Le bogue n'apparaît que sur iOS.

Nous avons résolu le problème en faisant défiler un peu la page:

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

(Cela ne répond toutefois pas à la cause ultime. Peut-être une sorte de bogue dans Safari mobile?)

0
Eino Gourdin

Plutôt que de définir à la fois les événements clic et touch, vous pouvez définir un gestionnaire indiquant si le périphérique fonctionnera avec click ou touch.

var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});
0
Abhishek

Aucune des solutions votées ne fonctionnait pour moi. Voici ce qui a finalement fonctionné:

J'ai déplacé le code qui était en $(document).ready out, s'il n'était pas requis dans le document ready. S'il est obligatoire de le préparer dans le document, déplacez ce code critique vers jQuery(window).load().

0
user1849091

en fait, il s’est avéré que deux modifications javascript ont été apportées au code. appel de la méthode javascript avec; à la fin, placez les balises de script dans le corps plutôt que dans la tête et, curieusement, modifiez même le texte affiché (cliquez sur le bouton de la souris) en un événement qui ne soit pas un événement. alors s'il vous plaît noter etc.

tourné débogueur sur safari, il n'a pas donné beaucoup d'informations ou même des erreurs parfois.

0
Atchuta Vani