Javascript 按钮单击仅适用于附加按钮列表中的一个按钮

JQUERY 我有4个按钮从数据库中提取并附加到列表中，但只有第一个附加的按钮起作用。其余的人什么也不会做

function getaplist(){
 $.getJSON('/geticsassignments',
 function(data){
 console.log(data)
 for (var i = 0; i < data.length; i++){
  var assign = ("<tr><th><button class='btn btn-warning' id='getaptext' 
  value=''>"+ data[i].aparatus +"</button></th></tr>")
 $('#aptbody').append(assign)
}

$('#getaptext').on('click', function(){
 $("#getaptext").removeClass("btn btn-warning").addClass("btn btn-danger")
 var aparatus = $(this).text()
 alert(aparatus)
 $.getJSON('/sendap',{
 }, function(data){
  console.log(data)
 })
})
})
}
getaplist()

<div id='aplist'>
 <table class="table">
    <thead>
       <tr>
          <th><p style="text-align: center;">Aparatus</p></th>
       </tr>
    </thead>
    <tbody id='aptbody'>
    </tbody>
 </table>
  </div>

函数getaplist（）{ $.getJSON（“/geticsassignments”， 功能（数据）{ console.log（数据） 对于（变量i=0；i

---

您对每个按钮都使用相同的id，

getaptext

。id属性必须是唯一的。您必须使ID不同，或者使用其他名称或类。

您的代码有两个问题

1-

ID

在DOM上必须是唯一的

2-您试图在动态创建的元素上添加事件侦听器，但这种方式无法正常工作

解决方案：

首先确保

id

是唯一的。例如，添加具有类名的事件侦听器

 $(document).on('click','.btn',function(){
    $(this).removeClass("btn btn-warning").addClass("btn btn-danger")
    var aparatus = $(this).text()
     ...
 })

---

这将适用于在页面上动态添加的所有元素事件

使其成为一个工作片段

id='getaptext'

为所有按钮添加相同的id。ID必须是唯一的，还需要修改

$（“#getaptext”）.removeClass..

以使用

$（此）。removeClass

哦，是的。不过，我没有编写处理程序代码。让我更新一下如何为每个附加的按钮创建不同的id。我可以把我的按钮放在for（i=0；ii）来连接它。”当第二个请求被发送时，这将使它们唯一