Web 组件元素单击事件侦听器不工作

Question

我正在创建一个简单的剪刀石头布游戏。

我决定不使用任何框架，所以我完全使用 Web Components JavaScript。

我几乎完成了所有我想做的事情，但是有一个组件 (ResultDisplay) 由于某些原因点击事件在 replay[=33 上不起作用=] 和 重置 按钮。

这很奇怪，因为我在它附近有一个非常相似的组件 (StartCounter)，它有一个按钮点击侦听器，它在那里工作得很好！

我不明白我错过了什么...

_initEventListeners() {
  // This is always called.
  this.replayButton.addEventListener('click', this._onReplayClick.bind(this));
  this.resetButton.addEventListener('click', this._onResetClick.bind(this));
}

_onReplayClick() {
  // This is never called when I'm clicking on the button.
  this.triggerEvent('replay');
}

我不能把整个代码都放在这里，那样太难读了。
但你可以全部找到 here，甚至可以用 npm run dev

自己测试

非常感谢任何想法。

Answer 1

在您的代码中，您将事件侦听器添加到初始 <result-display> 内容中的按钮。

然而，当你想显示第一场比赛的结果时，你再次调用createTemplate()，它会在shadowRoot中重新创建一个新的DOM，带有新的按钮，没有附加到它们的事件侦听器。

然后您应该再次致电 _initEvenListeners()。