Safari iphone/ipad "mouse hover" en un nuevo enlace después de que se reemplazara el anterior por javascript

Question

Después de hacer clic en un enlace en el iphone o ipad, deja un mouse simulado que desencadena el estilo a:hover css en ese enlace. Si el enlace tiene un controlador de JavaScript que lo mantiene en la misma página, el estado de desplazamiento no cambiará hasta que haga clic en otro enlace.

Esto se pone raro si tienes un widget ajax que hace preguntas y cada respuesta es un enlace. Cuando toca una de las respuestas, resalta con el estado de desplazamiento, y luego cuando las preguntas y respuestas son reemplazadas (usando javascript) por una nueva pregunta y respuestas, la nueva respuesta que aparece en la misma posición que la respuesta anterior tiene su el estado de vuelo automático se dispara automáticamente. Quiero evitar que esto suceda al nuevo enlace de respuesta.

¿Hay alguna forma (tal vez algo en javascript) que pueda darme el mismo resultado que el "hover" que ya no está por encima de este elemento?

Notas:

• sé que sólo pudiera tener a:hover utilizan el mismo estilo CSS como a, pero a:active estilo es apenas perceptible desde el estado activo de un toque clic es tan breve, así que estoy esperando para algo que pueda mostrar el estado de desplazamiento en un enlace hasta que lo reemplace con html nuevo
• He intentado una variedad de enfoques en javascript, como llamar a "blur()" en el elemento dom y algunas otras cosas, pero sin suerte -Estoy empezando a pensar que la mejor solución es aplicar clases a los enlaces en eventos de JavaScript para administrar el estado de vuelo estacionario (o j déjelo tal como está)

Answer 1

El problema es que cada vez que cambie el contenido en su sitio, Mobile Safari trata a los nuevos elementos como si ellos eran los viejos, porque ocupan la misma posición en el DOM. Una solución consiste en eliminar primero los elementos antiguos y luego agregar los nuevos elementos de forma asincrónica. La forma más sencilla de hacerlo es usando setTimeout().

http://jsfiddle.net/chad/JNZvu/10/

// When we click on an answer 
$('body').on('click', '.answer', function(){ 
    // don't follow it's link 
    event.preventDefault(); 
    // fade out the container 
    $('.container').fadeOut(function(){ 
    // remove old elements (happens after fadeOut because we are in the callback) 
    $('.container').html(''); 
    // add new elements asynchronously and fade container back in. 
    setTimeout('$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0); 
    }); 
}); 

Al hacer esto de verdad, la fadeOut se llamaría al mismo tiempo que la función de AJAX, y luego la eliminación/adición que sucedería en la devolución de llamada AJAX.

Answer 2

Puede intentar escribir otra: regla de desplazamiento que se activa cuando el padre tiene una clase particular, en efecto, anula la regla de desplazamiento existente. La clase en el padre debería agregarse en touchend y eliminarse en touchstart, de modo que la regla predeterminada podría entrar en vigencia en el siguiente enlace al que se haga clic o toque.

Acabo de resolver un problema similar donde quiero estilo hover para los elementos de la lista, pero como el padre puede desplazarse con un dedo usando iscroll, necesito cancelar ese efecto cuando se mueve la lista de desplazamiento. Se trata de utilizar jQuery, pero usted consigue la idea:

$('ul.scroll').bind('touchmove', function(e) { 
    $(this).addClass('moving'); 
}); 
$('ul.scroll').bind('touchstart', function(e) { 
    $(this).removeClass('moving'); 
}); 

aquí son reglas mis estilo:

ul.scroll li:hover { 
    background-color: #D1E8DA; 
} 
ul.scroll.moving li:hover { 
    background-color: #EFEFEF; 
}