如何获得动态创建的按钮的值？

Question

我有这个按钮

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

..and我有这个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);
  });
}

现在，当我按下类学生时，我确实从localhost获得了期望的div下拉列表:当前页面中的8080/CLASSROOM.ID，我唯一找不到的使它工作的东西如下。

教室是动态创建的，我点击的学生教室并不重要，我的代码似乎只有第一个教室ID，而不是我点击的那个。例如：第一教室第二教室

如果我按下第一教室，我就得到了想要的结果，但是当我按下第二教室时，我得到了和第一教室相同的结果，在那里我应该得到第二教室。谢谢。

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中分配给元素的this属性的代码片段中的onevent值是元素。

按照这种模式，按钮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

Answer 2

在单击中访问数据的首选方法是将数据保持在闭包中而不是DOM中。当您构造按钮时，您可以使用一个函数来评估用于通过闭包构造按钮的数据。

​

function createButton(data) {
  let button = $(`<button>${data.label}</button>`);
  button.on('click', function() {
    $('#content').append(`<br>${data.id} was clicked.`);
    // Data is available via the closure for this function at time of click and doesn't need to be stored in the DOM.
  });
  $('#content').append(button);
}

createButton({ id: 1, label: 'Button 1' });

createButton({ id: 2, label: 'Button 2' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

​

改变使用函数构建动态创建的内容的方式将允许您将事件处理程序与传递到函数的课堂数据连接起来。