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中，因此您可以听起{{{ 1}}元素代替：

#suggestion

一个有用的提示：绑定事件监听器时，请始终选择最可能的静态DOM元素。强烈建议不要在$('#suggestion').on('click', '.button-next', () => { currentTutorialCount += 1; tutorial[currentTutorialCount].set(); });或document上监听冒泡的evnet，因为它很昂贵（JS引擎必须遍历所有子节点以找出引发事件的子节点）。

Answer 2

您可以如下使用：

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

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

2 个答案: