javascript - jQuery.on() y.delegate() no funciona en el iPad
jquery on submit (7)
Si prueba este fragmento en el escritorio, todo funciona.
Cada vez que lo intentes en el iPad , no hará nada.
$(''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>
El .click() simple .click() funciona, pero no es lo que quiero. Lo mismo aplica para .delegate(); y .live()
¿Es un error o algo?
Cambia el estilo del cursor del cuerpo en iOS a "puntero" y todo funcionará perfectamente. No tendrá que agregar onclick = "" en cada elemento que quiera hacer clic en ...
<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>
Sé lo que estás pensando en este momento: "¡WTF!".
En iOS no hay ningún evento que burbujee sin un estilo de cursor .
Entonces en tu CSS necesitas agregar cursor: pointer; al elemento.
$(''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>
Sé que se lo preguntaron hace mucho tiempo, pero pensé que una simple solución CSS podría ayudar.
Estaba enfrentando este problema en el iPhone 5C y abajo.
Esto funcionó para mí:
body {
cursor:pointer;
}
No estoy seguro de por qué no funciona, probablemente sea un error, pero hay una buena solución. Simplemente ponga onclick="" en el div que está delegando y funcionará perfectamente
<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
alert("This works on iPad");
});
</script>
Se trata de una función / error móvil de Safari: los eventos de clic no llegarán hasta el cuerpo.
Agregar onclick="" es una solución conocida, pero en mi humilde opinión es más fácil adjuntar su oyente en un primer hijo de <body> .
Ver: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
Tuve un problema con un mensaje que precede al cuerpo html. Encontré este problema en el evento [ jQuery ''click'' no funciona en iOS Safari?
Usé esto
$(''body'').on(''click touchstart'', ''someselect'', function(){})
Y funcionó en iPhone 4S y iPhone 5S
encontré una solución en http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/
hacer el siguiente acercamiento:
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);
};
y donde enlaza el click-event-handler hacerlo:
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
});
Eso es.