5

问题解决了！

这个问题（特定于我的配置）已由 Dhoelzgen 和 Matthew Blancarte 根据接受的答案解决。问题的关键在于，当我应该使用 jQuery 的 on 方法来委托事件处理时，我正在将“点击”事件绑定到所有元素，如下所示：.inventory_item

<head>
    <script>
        $(document).ready(function(){

            $('#inventory_index').on('click', '.inventory_item', function(){
                alert('Click event fired!');
            });

        });
    </script>
</head>

使用这种技术，我大大提高了我的应用程序的响应能力。

继续阅读所有细节...

概述

我正在开发一个在“单页”中运行的库存应用程序（例如 www.myapp.com/app.php），并使用 jQuery 来执行 XHR 以将各种内容加载到 DIV 中和从中加载出来。

我正在使用 jQuery 1.9.1 和 jQuery UI 1.8（因为我必须出于遗留原因）。

问题：慢点击事件

我遇到的问题是随着 DOM 树变大，点击事件变得越来越慢。当从搜索返回约 1000 个项目时，延迟当前约为 2 秒。

这是 jQuery 的示例：

<head>
    <script>
        $(document).ready(function(){
            var inventory_item = $('#inventory_index.inventory_item');

            inventory_item.on('click', function(){
                alert('Click event fired!');
            });
        });
    </script>
</head>

和 HTML：

<div id="inventory_index">
    <div class="inventory_item">Inventory Item 0 <img src="inventory_item_0.jpg"></div>
    <!-- 999 Iterations -->
    <div class="inventory_item">Inventory Item 1000 <img src="inventory_item_1000.jpg"></div>
</div>

起初我认为这是因为每个.inventory_item's 中都有图像，但在实现延迟加载后，我发现问题与 DOM 中的元素数量有关，而不是与图像本身有关。

尝试的解决方案

正如您在上面的示例代码中看到的那样，我已经尝试实施过去几天我能找到的最佳解决方案。即，将.inventory_item's 的集合包装在一个可识别的#inventory_index元素中，以向 jQuery 提示它应该在哪里查找。

而且，此外，创建一个 javascript 对象来尝试减少 DOM 搜索的更多时间（虽然，老实说，我不确定它到底是如何工作的，或者它是否有帮助）。

有没有其他人遇到过这个问题并有任何可以分享的解决方案或建议？

当前最佳创意

截至目前，我认为可以解决此问题的唯一方法是通过将更少的结果加​​载到#inventory_index. 这是一个选项，但我真的很想保留将数百个（如果不是数千个）加载.inventory_item到索引中的能力。

奖金

奇怪的是，mouseenter 和 mouseleave 事件会立即触发。您可以在这里看到类似的问题：

大型列表上单击事件的 jQuery 委托性能 - 如果动态添加更多元素会减慢速度？

4

1 回答 1

13

如何使用 jQuery 的on 方法来附加这样的事件处理程序：

$('#inventory_index').on('click', '.inventory_item', ...)

这样，您只需添加一个事件处理程序，而不是为每个库存项目添加一个。没有测试过，只是偶然发现你添加了很多事件监听器。

一些解释：

如果您$('#inventory_index .inventory_item')用作选择器，您最终会将单个事件处理程序绑定到每个库存项目，这是一个问题，特别是如果您有很多库存项目。另一方面，#inventory_index上面的选择器只是为用作包装器的元素添加了一个事件处理程序，它负责处理对第二个选择器过滤的元素的所有点击，这是方法调用.inventory_item中的第二个参数。on

于 2013-04-26T20:09:52.417 回答