jQuery事件无法处理动态移动的徽章元素问题求助

问题场景 #

使用Django模板渲染两个徽章容器：

• project-badges 容器：渲染项目关联的徽章，类为 badge bg-primary
• all-badges 容器：渲染所有可选徽章，类为 badge bg-danger

需求是：点击project-badges内的徽章，将其移至all-badges；点击all-badges内的徽章，移回project-badges。当前实现仅首次移动有效，移动后的徽章无法触发反向点击事件。

原始JS代码：

$('span.badge.bg-primary').click(function(){
    $(this).remove()
    $(this).css({
        "transform": "scale(1.0)",
        "textDecoration": "none",
    })
    $(this).appendTo('div.all-badges')
    $('div.all-badges').append(' ')
});

$('span.badge.bg-danger').click(function(){
    $(this).remove()
    $(this).css("transform", "scale(1.0)")
    $(this).appendTo('div.project-badges')
    $('div.project-badges').append(' ')
});

问题原因 #

jQuery的click()方法是直接绑定到页面加载时已存在的DOM元素上的。当徽章被移动到另一个容器后，元素的类名未切换，且移动后的徽章属于动态变化的DOM元素，未被绑定对应的点击事件，导致无法触发反向操作。

解决方案 #

采用事件委托绑定事件（将事件绑定到静态父元素），同时在移动时切换徽章的类名，确保事件能正确匹配：

修改后的JS代码：

// 委托事件到document，监听所有badge的点击
$(document).on('click', 'span.badge.bg-primary', function() {
    const $badge = $(this);
    // 切换类名，匹配目标容器的样式
    $badge.removeClass('bg-primary').addClass('bg-danger');
    $badge.css({
        "transform": "scale(1.0)",
        "textDecoration": "none"
    });
    // 移动到目标容器
    $badge.appendTo('div.all-badges');
    $('div.all-badges').append(' ');
});

$(document).on('click', 'span.badge.bg-danger', function() {
    const $badge = $(this);
    // 切换类名，匹配目标容器的样式
    $badge.removeClass('bg-danger').addClass('bg-primary');
    $badge.css("transform", "scale(1.0)");
    // 移动到目标容器
    $badge.appendTo('div.project-badges');
    $('div.project-badges').append(' ');
});

关键改动说明 #

1. 事件委托：用$(document).on('click', 选择器, 回调)替代直接绑定，无论元素后续如何移动或修改，只要匹配选择器就能触发事件。
2. 类名同步切换：移动徽章时同步切换bg-primary和bg-danger类，确保下次点击能匹配对应的事件处理逻辑。
3. DOM操作优化：缓存$(this)为变量，避免重复查询DOM，提升性能。

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