web-dev-qa-db-fra.com

jQuery .on () et .delegate () ne fonctionne pas sur iPad

Si vous essayez cet extrait sur le bureau, tout fonctionne.
Chaque fois que vous essayez sur iPad , il ne fait rien.

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
div { 
  font-size: 24px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

Le gestionnaire .click() simple fonctionne, mais ce n'est pas ce que je veux. La même chose s'applique pour .delegate(); et .live()

Est-ce un bug ou quelque chose?

javascriptjqueryipaddelegation
27
Martin.

C’est un bug/une fonctionnalité de Safari mobile: les événements de clic ne seront pas affichés jusqu’au corps.

L'ajout de onclick="" est une solution de contournement connue, mais à mon humble avis, il est plus facile de joindre votre écouteur à un premier enfant de <body>.

Voir: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

32
mddw

Changez le style de curseur du corps sur iOS en "pointeur" et tout fonctionnera parfaitement. Vous n'aurez pas à ajouter onclick = "" sur chaque élément sur lequel vous souhaitez cliquer. ...

<script type="text/javascript">
    $(function() {
        // The trick
        if (/ip(hone|od)|ipad/i.test(navigator.userAgent)) {
           $("body").css ("cursor", "pointer");
        }
        // The test
        $("body").on("click", "#click", function() {
            alert("This also works on iOS !");
        });
    });
</script>
<div id="click">Click here</div>

Je sais ce que vous pensez en ce moment: "WTF!".

27
Boroboro

Je ne sais pas pourquoi cela ne fonctionne pas, c'est probablement un bug, mais il existe une solution de contournement de Nice. Mettez simplement onclick="" dans la division que vous déléguez et cela fonctionnera parfaitement

<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
    alert("This works on iPad");
});
</script>

violon

12
Martin.

Sur iOS il n'y a aucun événement ne bouillonne sans style de curseur .
Donc, dans votre CSS, vous devez ajouter cursor: pointer; à l'élément.

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
#click { 
  font-size: 24px; 
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

Je sais que cela a été demandé il y a longtemps, mais je pensais qu'une solution simple CSS pourrait aider.

9
Simon Arnold

j'ai trouvé une solution sur http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/

faire l'approche suivante:

var isIPad = function() {
    return (/ipad/i).test(navigator.userAgent);
};
var isIPhone = function() {
    return (/iphone/i).test(navigator.userAgent);
};
var isIPod = function() {
    return (/iPod/i).test(navigator.userAgent);
};

et où vous liez le click-event-handler faites ceci:

var eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "click";
// if you are using jquery-mobile
eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "vclick";

$(".selector").bind(eventName, function(e) {
    //do something here
});
// or
$(document).on(eventName, ".selector", function(e) {
    //do something here
});

c'est tout.

3
algorhythm

Je faisais face à ce problème sur iPhone 5C et ci-dessous.
Cela a fonctionné pour moi:

body {
  cursor:pointer;
}
0
Rakesh Yembaram

J'ai eu un problème avec un message que je ajoute au corps HTML. J'ai trouvé ce problème sur l'événement [ jQuery 'click' ne fonctionne pas sur iOS Safari?

J'ai utilisé ceci

$('body').on('click touchstart', 'someselect', function(){})

Et cela a fonctionné sur iPhone 4S et iPhone 5S

0
Cosmin Cojocaru