之前使用javascript替换之前的iphone/ipad"鼠标悬停"在新链接上

Question

单击iphone或ipad上的链接后,它会留下模拟鼠标悬停,触发该a:hover链接上的CSS样式.如果链接具有使您保持在同一页面的javascript处理程序,则在您单击其他链接之前,悬停状态不会更改.

如果您有一个ajax小部件询问问题并且每个答案都是链接,这会很奇怪.当你触摸其中一个答案时,它突出显示悬停状态,然后当问题和答案被新问题和答案替换(使用javascript)时,出现在与先前答案相同位置的新答案有其悬停状态自动触发.我想阻止这种情况发生在新的答案链接上.

是否有任何方式(也许是javascript中的某些东西)可以给我与"悬停"不再高于此元素相同的结果？

笔记:

• 我知道我可以a:hover使用相同的CSS样式a,但a:active由于触摸点击的活动状态非常简短,因此样式很难被注意到,所以我希望能够在链接上显示悬停状态直到我更换它用新的HTML
• 我在javascript中尝试了各种方法,比如在dom元素和其他一些东西上调用"blur()",但没有运气 - 我开始认为最好的解决方案是将类应用于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);
  });
});

当实际执行此操作时，淡出将与 AJAX 函数同时调用，然后删除/添加将在 AJAX 回调中发生。