javascript - IE9 悬停错误 - 移动一行后悬停状态保持不变

Question

这显然是实际应用程序的精简版本，但错误仍然存​​在...

我们有一个表格，其中的行可以通过行中的控件向上/向下移动，为了表示这一点，移动控件具有悬停状态。在下面的jsbin中http://jsbin.com/asasak/1在 IE9 中，您会看到移动行后悬停状态保持不变。

有什么想法吗？我什至尝试在移动时更改行的类，然后删除类，但悬停状态仍然存在!

Answer 1

类似于:hover persistent when moving DOM element我尝试了 :active 解决方案，但在移动后将状态附加到元素上，这并不好。

解决此问题的一种方法是替换元素而不是移动它。这是一个 hack，对性能有很小的影响，您可能不想添加它，而且它不像我喜欢的那样优雅，但这在 IE8 中对我有用。

$(document).ready(function(){
    $('table').on('click', 'a', function(){
      var $this = $(this);
      var row = $this.closest('tr');
      var index = row.index();
      var lastIndex = row.siblings().length;

      if ($this.hasClass('up') && index === 0 || $this.hasClass('down') && index === lastIndex) {
        return;
      }

      if ($this.hasClass('up')) {
        row.clone().insertBefore(row.prev());
      } else {
        row.clone().insertAfter(row.next());
      }

      row.remove();
    });
});

注意:使用 .on()委托(delegate) click 事件，避免每次都使用它们的事件 .clone() 元素。