如何批量为多个Div元素绑定jQuery doubletap事件避免重复编码？

我懂你这种重复写绑定代码的痛苦——每个带唯一ID的div都要单独写一段doubletap事件绑定，不仅代码冗余，后续维护也麻烦。刚好你找到的遍历思路完全可行，下面给你整理成清晰的实现方案，还有进阶优化写法：

问题场景回顾 #

我使用jQuery插件捕获doubletap事件，但目前为每个带唯一id的div元素单独编写了事件绑定代码，存在大量重复。希望通过$(this)或其他方式实现批量选择这些div元素，无需重复编写每个选择器的事件绑定逻辑，仅用简洁的代码即可为所有div绑定doubletap事件并获取触发事件的元素信息。

基础批量绑定方案 #

这种写法适合处理静态存在的div元素，通过遍历父容器的子元素来批量绑定事件：

// 遍历#infotextinner下的所有子元素，给每个元素绑定doubletap事件
$("#infotextinner").children().each(function() {
    $(this).on("doubletap", function() {
        // 用$(this)直接获取当前触发事件的元素，拿到它的ID
        const targetId = $(this).attr("id");
        // 这里替换成你实际需要的业务逻辑，比如提示信息
        alert(`触发双击事件的元素ID：${targetId}`);
    });
});

这段代码的好处：

• 不用再逐个写$("#xxx").on(...)，一次遍历搞定所有子元素的绑定；
• 事件回调里的$(this)精准指向触发事件的那个div，轻松获取它的ID、类名等属性；
• 代码结构清晰，后续修改业务逻辑只需要改回调里的内容即可。

进阶优化：事件委托写法 #

如果你的页面会动态添加div元素到#infotextinner容器里，推荐用事件委托的方式，性能更优且无需重复绑定：

// 把事件绑定到父容器上，通过事件冒泡触发子元素的事件回调
$("#infotextinner").on("doubletap", "div", function() {
    const targetId = $(this).attr("id");
    alert(`触发双击事件的元素ID：${targetId}`);
});

为什么推荐这种写法？

• 只需要绑定一次事件到父容器，相比遍历绑定减少了事件监听的数量，性能更好；
• 后续动态新增的div元素，只要在#infotextinner下，自动就能触发doubletap事件，不用再重新执行绑定逻辑；
• 代码更简洁，一行事件绑定就搞定所有需求。

内容的提问来源于stack exchange，提问作者MelissaHicking