1000个div上的jQuery点击事件，优化方法？

Posted 2023-05-08

【中文标题】1000个div上的jQuery点击事件，优化方法？

【英文标题】：jQuery click event on 1000 divs, optimize approach?

【发布时间】：2011-10-09 08:03:10

【问题描述】：

我正在构建一个销售活动门票的系统。现在有大约 1000 个不同的座位可供游客选择。可能有一天会达到 5000 个。

现在我为每个位置创建了一个 div，然后使用 jQuery 来使用 ajax 保留位置。因此，我有大约 1000 个 div 并且更令人担忧的是，我的 jQuery 选择器在每个 div 上设置了一个点击事件。

在这方面有更好的方法吗？

我想在按下 div 时触发 ajax，而不是重新加载页面。

【问题讨论】：

你能发布一些源代码吗？如果可能，我们可以帮助您进行优化。

【参考方案1】：

使用.delegate():

$("#container").delegate(".child", "click", function()
    alert("Clicked!");
);

这样，您只需创建一个管理所有 div 的事件。

【讨论】：

谢谢！你和其他所有建议委托的人也是如此。

【参考方案2】：

只需使用 jQuery 委托方法：

$('.theater').delegate('.seat','click',function(event)
  var self = $(event.target);
  console.log(self);
  // self is the '.seat' element that has been clicked.
);

【讨论】：

$(this) 在委托处理程序中工作并引用目标元素，不需要$(event.target)。

糟糕，太精确了。我通常使用绑定函数（this 总是引用我的 View 对象）所以我习惯使用$(event.target)。

【参考方案3】：

使用“事件委托”，即将点击事件绑定一次，不是绑定到每个单独的 div，而是绑定到 1,000 个 div 周围的 div。在处理程序中，您可以通过传递给处理程序的“事件”对象检索被单击的 div 的元素。

【参考方案4】：

这种方法称为事件委托，正如 Ash 解释的那样。 jQuery 有几个方法可以在这里提供帮助。 live() 和较新的 delegate() http://api.jquery.com/delegate/ 更精确一点。

因此，您将一个单击事件绑定到您感兴趣的所有 div 的父元素，并且单击它们会使 DOM 冒泡以被父元素捕获。到那时你就可以做你需要做的了。

【参考方案5】：

您可能想查看此 SO 线程，它可能对您有用。从您的帖子中很难判断，但在这种情况下，图像地图可能是您的选择。 Using JQuery hover with html image map