jQuery：从数据库追加的4个按钮仅首个可点击，其余无响应

嘿，这个问题我太熟了！你遇到的是动态DOM元素绑定事件的经典坑，再加上一个容易忽略的细节——重复ID，咱们一步步搞定它：

问题根源拆解 #

• 重复ID导致选择器失效：你在循环里给每个按钮都设置了id='getaptext'，但HTML规范里ID必须是唯一的。当你用$('#getaptext').on('click', ...)绑定事件时，jQuery只会匹配DOM中第一个拥有这个ID的元素，这就是为啥只有第一个按钮能响应点击。
• 普通事件绑定不支持动态元素：你是在按钮生成前（或者说只有第一个按钮存在时）绑定的事件，后面动态追加的按钮在绑定事件时还没出现在DOM里，自然不会被绑定到事件。

修正方案 #

1. 修复重复ID问题 #

把重复的ID换成类名（或者动态ID），类名适合给同类型元素做标识，这里我们用类getaptext代替ID，还可以给按钮加自定义data-*属性来存储需要的数据，方便后续使用：

function getaplist(){ 
    $.getJSON('/geticsassignments', function(data){ 
        console.log(data) 
        for (var i = 0; i < data.length; i++){ 
            // 移除重复ID，改用类名，添加data-ap存储设备值
            var assign = "<tr><th><button class='btn btn-warning getaptext' data-ap='"+ data[i].aparatus +"'>"+ data[i].aparatus +"</button></th></tr>";
            $('#aptbody').append(assign); 
        } 
    });
}

2. 使用事件委托绑定点击事件 #

事件委托是解决动态元素事件绑定的最佳方案——把事件绑定到已经存在的父元素上（比如你的#aptbody），利用事件冒泡机制，父元素会捕获子元素的点击事件，再通过类名过滤出我们需要的按钮：

// 把事件绑定到父容器#aptbody，监听子元素.getaptext的点击
$(document).ready(function(){
    $('#aptbody').on('click', '.getaptext', function(){
        // 获取按钮对应的设备值，可以用data属性或者文本内容
        var selectedAp = $(this).data('ap');
        // 这里写你的点击逻辑
        console.log('点击了设备按钮：', selectedAp);
        // 比如弹窗、发送请求等操作
    });
});

额外提醒 #

• 不要把事件绑定代码放在getaplist函数里，否则每次调用这个函数都会重复绑定事件，导致点击一次触发多次逻辑。
• 如果你的父容器#aptbody也是动态生成的，可以把事件委托绑定到更上层的静态元素（比如$(document)），不过尽量选择离目标元素最近的静态父元素，这样性能更好。

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