如何让每个带相同class的元素点击事件各自仅触发一次，兼容动态加载元素

你原来的写法存在两个核心问题：

1. 直接使用$(".dropdown").one()绑定事件，只会给页面初始化时已经存在的.dropdown元素绑定事件，后续动态加载新增的同类元素不会被绑定，点击无响应。
2. 如果出现触发一个元素的点击后所有同类元素事件都失效的情况，通常是事件绑定逻辑没有做个体区分导致的。

推荐使用事件委托+触发标记的方案实现需求，代码如下：

方案1：使用类名做触发标记（更简洁） #

$(document).ready(function() {
    // 事件委托绑定到document（如果有固定不销毁的父容器，替换为父容器选择器性能更好）
    $(document).on('click', '.dropdown:not(.clicked-once)', function() {
        // 给当前点击元素添加已触发标记，后续点击不会再匹配到选择器
        $(this).addClass('clicked-once');

        // 此处写入你原本的点击事件业务逻辑
        // ...
    });
});

方案2：使用jQuery data方法做触发标记（不需要修改元素class属性） #

$(document).ready(function() {
    $(document).on('click', '.dropdown', function() {
        const $target = $(this);
        // 已触发过的元素直接跳过逻辑
        if ($target.data('has-clicked')) return;
        // 标记为已触发
        $target.data('has-clicked', true);

        // 此处写入你原本的点击事件业务逻辑
        // ...
    });
});

该方案的优势：

• 完全兼容动态加载、后续新增的.dropdown元素，不需要每次新增元素后重新绑定事件
• 每个元素的触发状态独立，互相不会影响，保证各自仅触发一次
• 事件委托的写法性能优于逐个绑定事件，尤其适合元素数量不固定的场景

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