javascript - 将 jQuery delegate (on) 与复选框一起使用会导致响应出现巨大延迟 - 为什么？

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绑定(bind)了方法，这是非常糟糕。 因此，请始终尝试将其绑定(bind)到控件所在的最近的 div(最近的父元素)。

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

var dataTable=$('#dataTable');

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

关于 Jquery API 的事件表现如下所示。

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.