我正在尝试使用包含当前任务文本的对象数组创建交互式教程。
文本创建任务并动态附加按钮。
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() 函数创建一个新的时，按钮的引用都会丢失。有什么建议么 ？
您遇到了将点击事件绑定到运行时不存在的元素的经典问题。当您的脚本被评估时，元素.button-next尚未出现在 DOM 中，因此单击事件回调不会绑定到按钮。
您想要的是依赖事件冒泡：您想要监听运行时存在的元素，并查看点击事件是否从动态插入的按钮冒泡到静态元素。
由于按钮实际上是作为 的子节点注入的#suggestion，并且#suggestion保证在运行时出现在 DOM 中，因此您可以改为监听冒泡到#suggestion元素的 click 事件：
$('#suggestion').on('click', '.button-next', () => {
currentTutorialCount += 1;
tutorial[currentTutorialCount].set();
});
一个有用的提示：绑定事件侦听器时，始终选择最接近的静态 DOM 元素。我们强烈劝阻，听取他们对冒泡evnetsdocument或者body，因为它是昂贵的（JS引擎具有迭代通过所有子节点，以找出哪一个发出的事件）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句