Question

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>

Answer 1

您的代码存在两个问题。

1- ID在DOM上必须是唯一的。

2-您正试图在动态创建的元素上添加事件侦听器，这些元素并不像您尝试的那样工作。

解决方案：

首先确保id是唯一的。并添加具有类名称的事件侦听器，例如

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

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

Answer 2

您为每个按钮使用相同的ID getaptext。 id属性必须是唯一的。你必须使id不同，或使用其他东西，如通用名称或类。

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

2 个答案: