Как получить значение кнопки, созданной динамически? - PullRequest
Новая
       12

Как получить значение кнопки, созданной динамически?

0 голосов
/ 16 апреля 2019

У меня есть эта кнопка 

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

.. и у меня есть этот jQuery, который получает div с динамически создаваемой страницы, а URL-адрес является идентификатором класса, на который нажал пользователь. 

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

Теперь, когда я нажимаю на учеников класса, я получаю ожидаемое выпадающее меню с нужным div от localhost: 8080 / classroom / CLASSROOM.ID на текущей странице, единственное, что я не могу найти, чтобы заставить его работать, это следующее.

Классные комнаты создаются динамически, независимо от того, в какую классную комнату студентов я нажимаю, мой код, похоже, получает только первый идентификатор классной комнаты, а не тот, на который я нажимаю. Например. 1 класс Класс 2

Если я нажимаю в классе 1, я получаю желаемый результат, но когда я нажимаю в классе 2, я получаю тот же результат, что и в классе 1, где я должен получить класс 2. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Таким образом, несколько элементов не могут иметь одинаковый идентификатор.Чрезвычайно простой способ отправить значение кнопки, нажатой на общий обработчик, - это передать его в качестве параметра из onclick code: 

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

и получить значение идентификатора класса в getв качестве аргумента 

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

Несколько кнопок для разных классов могут быть настроены одинаково без использования значений идентификатора.

Обновление для jQuery

Значение this внутри фрагмента кода, назначенное в HTML атрибуту onevent элемента, является элементом.

FollowВ этом шаблоне обработчик нажатия кнопки может быть закодирован в HTML как 

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

, поэтому при вызове обработчик get может использовать стандартные методы jQuery для аргумента кнопки: 

 function get( button){
   let classroomvalue = button.val();
   // ... and so on
0 голосов
/ 16 апреля 2019

Мой предпочтительный способ иметь доступ к данным по клику - держать их закрытыми, а не 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>

Изменение способа создания динамически создаваемого контента для функций позволит вам связать обработчики событий с данными классной комнаты, передаваемыми в функцию.

...