Safari iphone / ipad "зависание мыши" на новой ссылке после замены предыдущей ссылки на javascript

Question

После того, как вы щелкнете ссылку на iphone или ipad, на нем останется смоделированное наведение мыши, которое вызывает стилевое оформление a:hover css для этой ссылки. Если ссылка имеет обработчик javascript, который удерживает вас на той же странице, состояние наведения не изменится, пока вы не нажмете другую ссылку.

Это становится странным, если у вас есть виджет Ajax, который задает вопросы, и каждый ответ является ссылкой. Когда вы касаетесь одного из ответов, он выделяется с состоянием наведения, а затем, когда вопрос и ответы заменяются (с использованием javascript) новым вопросом и ответами, новый ответ, который появляется в той же позиции, что и предыдущий ответ, имеет Состояние зависания автоматически срабатывает. Я хочу, чтобы это не произошло с новой ссылкой для ответа .

Есть ли какой-нибудь способ (может быть, что-то в javascript), который может дать мне тот же результат, что и "зависание", которое больше не находится над этим элементом?

Примечания:

• Я знаю, что я мог бы просто a:hover использовать тот же стиль CSS, что и a, но стиль a:active едва заметен, так как активное состояние щелчка касанием настолько короткое, поэтому я надеюсь, что может отображать состояние наведения на ссылку, пока я не заменю ее новым html
• Я пробовал различные подходы в javascript, например, вызов «blur ()» для элемента dom и некоторые другие вещи, но не повезло - я начинаю думать, что лучшим решением является применение классов к ссылкам. на событиях javascript, чтобы самостоятельно управлять состоянием наведения (или просто оставить все как есть)

Answer 1

Проблема в том, что при замене содержимого на месте Mobile Safari обрабатывает новые элементы, как если бы они были старыми, поскольку они занимают одинаковое положение в DOM.Один из способов - сначала удалить старые элементы, а затем добавить новые элементы асинхронно.Простейший способ сделать это - использовать 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);
  });
});

Когда вы делаете это по-настоящему, fadeOut будет вызываться одновременно с функцией AJAXи тогда удаление / добавление произойдет в обратном вызове AJAX.

Answer 2

Вы можете попробовать написать другое правило hover, которое активируется, когда родительский класс имеет определенный класс, фактически отменяя существующее правило hover.Класс родительского элемента должен быть добавлен в touchend и удален в touchstart, чтобы правило по умолчанию могло вступить в силу при следующей щелчке или касании ссылки.

Я только что решил аналогичную проблему, в которой я хочу использовать стиль при наведениидля элементов списка, но так как родитель может прокручивать одним пальцем с помощью iscroll, мне нужно отменить этот эффект наведения, как только список прокрутки перемещается.Он использует jQuery, но вы поняли:

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

вот мои правила стиля:

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