Нажмите Событие не работает на динамически созданной кнопке

Question

Я пытаюсь создать интерактивный учебник, используя массив объектов, которые содержат текст для текущей задачи.

Текст создает задачу и динамически прикрепляет кнопку.

let currentTutorialCount = 0;
var tutorial = [{
    text: "Welcome, I'll be your Task Manager and Guide <button class = 
   'button-next'> Got it</button>",
    set: function () {
      $('#info-container').addClass('non-active');
      $('#canvas-container').addClass('non-active');
      $('#info-container-transparent').css('display', 'block');
      $('#canvas-container-transparent').css('display', 'block');
      $('#suggestion').html(this.text);
    }
  },
  {
    text: "Here you can find information about your String and Current 
    State <button class = 'button-next'>Got it</button>",
    set: function () {
      $('#info-container-transparent').css('display', 'none');
      $('#info-container-text').addClass('highlightBorder');
      $('#info-container-buttons-transparent').css('display', 'block');
      $('#suggestion').html(this.text);
    }
  },
  {
    text: "Here you can generate new Random Graphs and Strings <button 
    class = 'button-next'>Got it</button>",
    set: function () {
      $('#info-container-text').removeClass('highlightBorder');
      $('#info-container-buttons').addClass('highlightBorder');
      $('#info-container-buttons-transparent').css('display', 'none');
      $('#info-container-buttons-transparent').css('display', 'block');
      $('#suggestion').html(this.text);
    }
  }
];` 

Когда я добавляю прослушиватель событий при нажатии на кнопку, план состоит в том, чтобы перейти к следующей задаче, увеличив значение currentTutorialCount и вызвать функцию set:

    $('.button-next').click(() => {
     currentTutorialCount += 1;
     tutorial[currentTutorialCount].set();
    });

Структура DOM выглядит следующим образом:

<div id="main-feedback-grid">
  <div id="information">
    <p id="suggestion">Welcome, Make your first transition to the next node</p>
    <button class="answer" value="true">Yes</button>
    <button class="answer" value="false">No</button>
  </div>
</div>

Моя проблема в том, что событие нажатия срабатывает только при первом нажатии кнопки. Я предполагаю, что ссылка на кнопку теряется каждый раз, когда функция set () создает новую. Есть предложения?

Answer 1

Вы столкнулись с классической проблемой привязки события click к элементу, который отсутствует во время выполнения. Когда ваш скрипт проверяется, элемент .button-next еще не присутствует в DOM, поэтому обратный вызов события click не будет привязан к кнопке.

То, что вы хотите, - это полагаться на всплывающее событие: вы хотите прослушать элемент, присутствующий во время выполнения, и посмотреть, не произошло ли событие click от вашей динамически вставленной кнопки до статического элемента.

Поскольку кнопка фактически внедряется как дочерний узел #suggestion, а #suggestion гарантированно присутствует в DOM во время выполнения, вы можете вместо этого прослушивать событие click, всплывающее до элемента #suggestion:

$('#suggestion').on('click', '.button-next', () => {
  currentTutorialCount += 1;
  tutorial[currentTutorialCount].set();
});

Полезный совет: всегда выбирайте ближайший статический элемент DOM при привязке слушателя событий. Настоятельно не рекомендуется прослушивать пузырящиеся евнеты на document или body, потому что это дорого (движок JS должен перебирать все дочерние узлы, чтобы выяснить, какой из них отправил событие).

Answer 2

Вы можете использовать как ниже:

$("body").find(".button-next").on('click', function(){
   // your code here
})