单击事件不适用于动态创建的按钮

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

您遇到了将点击事件绑定到运行时不存在的元素的经典问题。在评估脚本时，元素 .button-next 尚未出现在 DOM 中，因此单击事件回调不会绑定到按钮。

您想要的是依赖事件冒泡：您想要监听运行时存在的元素，并查看点击事件是否已从您的动态插入的按钮冒泡到您的静态元素。

由于按钮实际上是作为#suggestion 的子节点注入的，并且#suggestion 保证在运行时出现在DOM 中，因此您可以监听冒泡到#suggestion 元素的点击事件：

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

一个有用的提示：绑定事件侦听器时，始终选择最接近的静态 DOM 元素。强烈建议不要在 document 或 body 上收听冒泡的 evnet，因为它很昂贵（JS 引擎必须遍历所有子节点才能找出哪个子节点发出了事件）。

Answer 2

你可以像下面这样使用：

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