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

【问题标题】：How to get the value of a button created dynamically?如何获取动态创建的按钮的值？
【发布时间】：2019-09-05 22:42:11
【问题描述】：

我有这个按钮

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 Students 时，我确实从当前页面中的 localhost:8080/classroom/CLASSROOM.ID 获得了带有所需 div 的预期下拉列表，我唯一找不到让它工作的是关注。

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

如果我按教室 1，我会得到想要的结果，但是当我按教室 2 时，我会得到与教室 1 相同的结果，我应该得到教室 2。提前谢谢你。

【问题讨论】：

你能给我们看一个生成的html的例子吗？听起来您可能会重复 ID。
生成的 HTML 是属于班级的学生列表，位于 localhost/classroom/CLASSROOM.ID 下，这是我在按钮中得到的值，我用它来获取 URL同页应用的 DIV。
您是否有多个按钮具有相同的 ID 属性？
我没有，唯一具有 id="getButton" 的按钮是具有 value=classroom.id 的按钮。
" 我按下教室 1，我得到了想要的结果，但是当我按下教室 2 时" 意味着你有 2 个（以及更多）按钮都具有相同的 ID = "getButton" 所以显然只有第一个会起作用，因为 ID 是唯一的。

标签： javascript jquery node.js pug

【解决方案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 属性的代码 sn-p 中的 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

【讨论】：

很遗憾，我不明白。如何在没有 ID 的情况下获取 jQuery 中的按钮？
如果您需要完全访问按钮元素（为什么？），您可以从事件处理程序代码中传递按钮元素。 - 查看更新的答案。

【解决方案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>

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

【讨论】：