Question

我在Potential Django Bug In QuerySet.query?上设置了DataTables。我希望的超链接突出显示该行。我用这个例子：

$(document).ready(function() {
  $('#example').DataTable({
    select: {
      style: 'multi'
    }
  });

  $('#example').on('click', 'a.do-nothing', function(e) {
    e.stopImmediatePropagation();
    return false;
  });
});

我似乎无法解决这个问题。任何人都可以帮助我吗？

Answer 1

请参阅this fiddle。

  $('#example a.do-nothing').on('click', function(e) {
    e.stopImmediatePropagation();
    return false;
  });

根据jQuery documentation：

从事件处理程序返回false会自动调用event.stopPropagation()和event.preventDefault()。也可以为处理程序传递false值作为function(){ return false; }的简写。因此，$( "a.disabled" ).on( "click", false );将一个事件处理程序附加到具有类disabled的所有链接，以阻止它们在单击时被跟踪，并且还可以阻止事件冒泡。

如果您不需要在$('#example a.do-nothing').on('click', false);上执行任何其他处理程序，那么您可以简单地使用a.do-nothing。

很奇怪您的选择器过滤器无法正常工作：如果我们使用过滤器，则可以：

$('#example td').on('click', '.do-nothing', false);

以下将允许您继续点击事件而不冒泡点击DOM并触发悬停：

  $('#example td').on('click', '.do-nothing', function (e) {
    e.stopPropagation();
  });

Answer 2

为什么不覆盖CSS呢？请参阅this fiddle。

这样你就不需要乱用javascript了。

table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, 
table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
    background-color: #f9f9f9;
}

table.dataTable.hover tbody > tr.selected:hover, table.dataTable.hover tbody > tr > .selected:hover, 
table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
    background-color: #f9f9f9;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #f6f6f6;
}

停止委派事件的传播

2 个答案: