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

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。页面，我唯一找不到让它工作的是以下内容。

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

如果我按 Classroom 1，我会得到想要的结果，但是当我按 Classroom 2 时，我会得到与 Classroom 1 相同的结果，我在这里应该得到 Class2 号房间。提前谢谢你。

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

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>

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

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

How to get the value of a button created dynamically?

javascript

jquery

node.js

pug