2

嗨，我有一个动态创建的表，该表充当使用复选框的选择列表。我希望这些复选框是互斥的。因此，在选中一个框时，我需要清除任何其他选中的框。

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

这种工作，但在点击和发生任何不好的事情之间存在巨大的延迟。我尝试了各种组合都没有成功。

是否有简单的解释说明为什么会造成延迟。

4

3 回答 3

2

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

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

var dataTable=$('#dataTable');

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

关于Jquery API的事件性能如下所示。

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

于 2012-12-22T08:58:13.753 回答
1

您可能会看到，在解除警报框之前，不会执行之后的代码。alert 命令是一个阻塞命令。

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

于 2012-12-22T08:42:58.677 回答
1

您需要使用$(this)而不是通过另一个查找。如上所述，如果可能，请尝试绑定到最近的父元素，例如容器 div。话虽如此，这应该会加快您的速度：

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

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

于 2012-12-22T09:05:57.933 回答