如何为动态追加的卡片设置唯一ID？解决多卡片功能异常问题

核心问题 #

你代码里的#head和#checkbox01是固定ID，HTML规范里ID必须唯一，每次新增卡片都重复用这些ID，导致$("#mainCard").find("#head")会选中所有带这个ID的元素，所以新标题会追加到所有卡片的header里。

修复方案 #

1. 放弃固定ID，直接操作刚创建的DOM元素：创建卡片时先把元素存在变量里，后续操作都针对这个变量，避免全局选择器误选旧元素。
2. 给每个卡片绑定独立的列表添加功能：用事件委托处理动态生成的列表添加按钮，确保每个按钮只操作自己所属卡片的列表。

修改后的代码 #

// 新增卡片的点击事件
$(".add").click(function(){
    const listTitle = $("#userInp").val().trim();
    if(!listTitle) return; // 空输入不创建卡片

    // 构建完整的卡片HTML，包含列表输入区域
    const card = $(`
        <div class="card col-xl-3">
            <div class="card-header">
                <button type="checkbox" class="form-check-input"></button>
                <span>${listTitle}</span>
            </div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control list-item-input" placeholder="输入列表项">
                    <button class="btn btn-primary add-list-item">添加</button>
                </div>
                <ul class="list-group"></ul>
            </div>
        </div>
    `);

    $("#mainCard").append(card);
    $("#userInp").val(''); // 清空标题输入框
});

// 事件委托处理动态生成的列表添加按钮
$("#mainCard").on("click", ".add-list-item", function(){
    const input = $(this).siblings(".list-item-input");
    const itemText = input.val().trim();
    if(!itemText) return;

    // 给当前卡片的ul添加列表项
    $(this).closest(".card-body").find(".list-group").append(`
        <li class="list-group-item">${itemText}</li>
    `);
    input.val(''); // 清空列表项输入框
});

关键改进点 #

• 不再用重复ID，所有元素用类标识，操作时通过DOM关系（如closest()、siblings()）定位到当前卡片的元素，避免影响其他卡片。
• 新增卡片时直接把标题插入到header里，不用后续追加，减少DOM操作次数。
• 给每个卡片添加独立的列表输入和添加按钮，通过事件委托处理动态元素的点击事件，确保功能只作用于当前卡片。
• 增加了空输入判断，避免创建空标题的卡片或空列表项。

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