Question

您好我有一个动态创建表，它使用复选框作为选择列表。我希望这些复选框是互斥的。因此，在选中一个方框后，我需要清除任何其他复选框。

$(document).on("keydown", "#list_Instructors input.allocate",function(event){   
    alert("hit");
    $("#list_Instructors input.allocate").removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

这种作品，但点击和发生的任何事情都有很大的延迟。我尝试了各种各样的组合但没有成功。

有没有简单的解释为什么会造成延迟。

Answer 1

您的问题是绑定 整个DOM 的方法，真的很糟糕。因此，请始终尝试将其绑定到控件所在的最接近的div （最近的父元素）。

第二件事是始终缓存您的选择器以获得更好的性能。如下所示

var dataTable=$('#dataTable'); dataTable.on("click", function(event){ alert($(this).text()); });

我写了一篇关于How to Improve jQuery Selector Performance的博文。同时检查一下。

关于来自Jquery API的活动效果，如下所示。

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery都必须比较该类型的所有附加事件的所有选择器从事件目标到最高层的路径中的元素文献。为获得最佳性能，请在文档中附加委派事件位置尽可能接近目标元素。避免过量使用document或document.body来处理大型的委托事件文档。

我希望这会对你有所帮助。

Answer 2

您可能会看到的是，在取消警报框之前，之后的代码不会被执行。 alert命令是阻塞命令。

也许您可以使用console.log()进行此功能的调试。这不会阻止您的代码，它将在keydown事件上执行。

Answer 3

您需要使用$(this)而不是通过其他查找。同样如上所述，尝试绑定到最接近的父元素（如果可能），例如容器div。有了这个说，这应该加快你的速度：

$(document).on('keydown', '#list_Instructors input.allocate', function (event) {   
    //alert("hit");
    console.log('hit');
    $(this).removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

但是你应该尝试用容器div或另一个父元素替换document

使用带有复选框的jQuery委托（on）会导致响应的巨大延迟 - 为什么？

3 个答案: