javascript - 如何获取动态创建的按钮的值？

Question

我有这个按钮

button(type='button' id='getButton',  onclick='get()', value=classroom.id ) Class Students

..我有这个 jQuery，它从动态创建的页面获取 div，其 url 是用户单击的教室的 ID。

function get(){
  var classroomvalue = $("#getButton").val();
  $.ajax({
    type: 'GET',
    url: 'http://localhost:8080/classroom/' + classroomvalue,
  })
  .done(function(data) {
    console.log('Get response:', JSON.stringify(data,  "", 2));
    $("#getResponse").html($(data).find('#students').html());
  })
  .fail(function(jqXHR, textStatus, err) {
    console.log('Ajax error response:', textStatus);
  });
}

现在，当我按“类(class)学生”时，我确实从当前页面中的 localhost:8080/classroom/CLASSROOM.ID 获得了带有所需 div 的预期下拉菜单，我唯一找不到使其工作的就是以下。

教室是动态创建的，与我点击的学生教室无关，我的代码似乎只获得了第一个教室ID，而不是我点击的教室ID。例如。教室1教室2

如果我按“教室 1”，我会得到所需的结果，但当我按“教室 2”时，我会得到与“教室 1”相同的结果，而我应该得到“教室 2”。预先感谢您。

Answer 1

因此多个元素不能具有相同的 id。将单击的按钮的值发送到通用处理程序的一种非常基本的方法是将其作为 onclick 代码中的参数传递:

<button(type='button',
  onclick='get(this.value)'
  value="someClassroomId" )
 >
    someClassRoomId Students
 </button>

并在get中获取教室id值作为参数

 function get( classroomvalue){
   $.ajax({
     type: 'GET',
     url: 'http://localhost:8080/classroom/' + classroomvalue,
   })
   .done( // etc

可以以相同的方式设置不同类别的多个按钮，而无需使用 id 值。

<小时/> jQuery 更新

在 HTML 中分配给元素的 onevent 属性的代码片段内的 this 值就是该元素。

按照此模式，按钮 onclick 处理程序可以在 HTML 中编码为

<button(type='button',
  onclick='get( $(this))'
  value="someClassroomId" )
>
    someClassRoomId Students
 </button>

以便在调用 get 处理程序时可以在其按钮参数上使用标准 jQuery 方法:

 function get( button){
   let classroomvalue = button.val();
   // ... and so on