2

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

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

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

4

1 回答 1

0

与移动 DOM 元素时 :hover persistent类似，我尝试了该: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()委托click事件可以避免.clone()每次都需要元素及其事件。

于 2013-04-19T09:43:11.333 回答