Question

这显然是实际应用程序的一个大大减少的版本，但是bug仍然是相同的......

我们有一个包含行的表，可以使用行中的控件向上/向下移动，并表示移动控件具有悬停状态。在IE9中的以下jsbin http://jsbin.com/asasak/1中，您将看到在移动行之后悬停状态仍然存在。

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

Answer 1

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

解决此问题的一种方法是替换元素而不是移动它。这是一个黑客，有一个小的性能影响，你可能不想添加，它不像我喜欢的那样优雅，但这在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()委派点击事件，避免每次都有.clone()个元素及其事件。

IE9悬停错误 - 移动一行后悬停状态停留

1 个答案: