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);
  });
}

现在，当我按下班级学生时，我确实从当前页面的localhost：8080 / classroom / CLASSROOM.ID中获得具有所需div的预期下拉列表，我唯一找不到的是正在关注。

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

如果我按教室1，我得到期望的结果，但是当我按教室2，我得到与教室1相同的结果，我应该得到教室2。预先谢谢你。

Answer 1

因此，多个元素不能具有相同的ID。将单击的按钮的值发送到通用处理程序的一种非常基本的方法是将其作为来自services .AddMvcCore() .AddJsonOptions(options => { // If(my_custom_header_value == "use_first_converter") options.SerializerSettings.Converters.Add(new FirstConverter()); // Else //options.SerializerSettings.Converters.Add(new FirstConverter()); })代码的参数进行传递：

onclick

并在<button(type='button', onclick='get(this.value)' value="someClassroomId" ) > someClassRoomId Students </button>中获取教室ID值作为参数

get

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

jQuery的更新

在HTML中分配给元素的function get( classroomvalue){ $.ajax({ type: 'GET', url: 'http://localhost:8080/classroom/' + classroomvalue, }) .done( // etc属性的代码段内的this值就是该元素。

按照这种模式，按钮onclick处理程序可以用HTML编码为

onevent

，以便在调用<button(type='button', onclick='get( $(this))' value="someClassroomId" ) > someClassRoomId Students </button>处理程序时可以在其按钮参数上使用标准jQuery方法：

get

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>

通过功能来构造动态创建的内容的方式将使您能够将事件处理程序与传递到函数中的课堂数据进行连接。

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

2 个答案: