jQuery中无法读取.append添加的元素，无法统计成员数量

问题根源 #

你的代码存在三个关键错误导致无法统计成员数量：

• 事件绑定对象错误：添加成员的逻辑绑定到了#confirm-team按钮（确认团队按钮），但实际应该绑定到#confirm-member（添加成员按钮）。
• HTML字符串拼接错误：使用append()时，变量tinput没有正确嵌入字符串，导致添加的成员元素内容是+tinput+而非输入的名称。
• 无效的类判断：$("#team-chosen").hasClass("member")是检查父容器是否带有member类，但member是子元素的类，这个判断完全没必要，直接统计.member元素数量即可。

修正后的代码 #

HTML（无需修改）

<div id="team-builder">
    <div id="team-chosen"></div>
    <div id="member-input">
        <input type="text" class="input-field" id="name-input" placeholder="Insert name here..." />
        <button id="confirm-member">Add to the team</button>
        <button id="confirm-team" class="not-ready">Need 3 more people</button>
    </div>
</div>

JavaScript

$(document).ready(function () {
    // 绑定到正确的添加成员按钮
    $("#confirm-member").click(function(){
        var tinput = $('#name-input').val();
        // 跳过空输入
        if (!tinput.trim()) return;
        
        // 正确拼接HTML字符串，插入输入的名称
        $("#team-chosen").append("<div class='member'>" + tinput + "</div>");

        // 直接统计所有.member元素的数量
        var cmember = $('.member').length;
        console.log("当前成员数量：" + cmember);

        // 根据数量更新确认团队按钮的状态
        if (cmember >= 3) {
            $("#confirm-team").removeClass("not-ready").addClass("ready").text("确认团队");
        } else {
            var need = 3 - cmember;
            $("#confirm-team").removeClass("ready").addClass("not-ready").text("Need " + need + " more people");
        }

        // 重置输入框
        $('#name-input').val('');
    });
});

关键修改说明 #

1. 修正事件绑定：将点击事件绑定到#confirm-member按钮，确保点击「Add to the team」时触发添加成员逻辑。
2. 修复字符串拼接：用"<div class='member'>" + tinput + "</div>"替代原错误写法，正确插入输入的成员名称；也可以用ES6模板字符串：$("#team-chosen").append(
   ${tinput}
   )。
3. 移除无效判断：直接通过$('.member').length统计所有动态添加的成员元素数量，无需检查父容器的类。
4. 增加空输入判断：避免添加空名称的成员。
5. 优化按钮状态更新：根据成员数量自动更新#confirm-team按钮的文本和样式，更符合业务逻辑。

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