0

我有很多checkboxes，比如：

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
...nearly 1000

它们可以放置在文档的不同位置。

使用jQuery，我将每个复选框替换为以下内容：

<div class="checkbox">
    <input type="checkbox">
</div>

这是定制所必需的。

然后，我将一些事件绑定到父 div 和一个复选框，例如：

input.on('keyup keydown keypress click', function(e) {
    ...
});

div.on('click mouseover mouseout', function(e) {
    ...
});

我在页面加载时获得了近 5 秒的冻结时间。

如果我删除事件绑定，一切正常。所以这里最紧张的地方是事件。

我几乎尝试过使用这个：

parent.on('keyup keydown keypress click', input, function(e) {
    ...
});

or 

$(document).on('keyup keydown keypress click', input, function(e) {
    ...
});

or

input.delegate('keyup keydown keypress click', function(e) {
    ...
});

...and some different ways of bindings

但是它们都没有帮助（有些是错误的并且不能按预期工作）。

我还阅读了一些有关事件委托的文章，但还没有可靠的解决方案。

所以这里的泄漏是事件和绑定的数量。1000 个元素 = ~7000 个事件绑定等等。

如何优化此代码以在页面加载时没有冻结时间的情况下工作？

4

1 回答 1

1

您是否尝试过尽可能“委托”，例如

$('body').on('keyup keydown keypress click', 'input', function (event) {
    // ...
});

如果您使用的是 jQuery < 1.7，请delegate改用：

$('body').delegate('input', 'keyup keydown keypress click', function (event) {
    // ...
});
于 2013-07-17T05:49:40.473 回答