javascript - 如何在 javascript 模板中的元素上使用 getElementById

Question

我有一个如下所示的占位符:

<div class="select-playlist">
    </div>

我将以下 html 附加到占位符中:

<script class="select-playlist-template" id="select-playlist-template">
  <h1>SELECT A PLAYLIST</h1>
  <select class="all-playlists" id="all-playlists" style="width: 50%">
  </select>
  <button class="btn btn-default" id="load-playlist">Load the Playlist</button>
  <button id="playlist-recommendation" class="playlist-recommendation">FIND MY MOST COMMON RELATED ARTISTS</button>
</script>

现在我想在用户单击上面 html 中的按钮并使用代码时启动一个函数:

document.getElementById('playlist-recommendation').addEventListener('click', function getArtistsAndRelated() {...}, false);

但我收到错误“getElementById(...) 为空”。显然，即使代码已加载到文件中，代码也无法识别该 id。如何向 javascript 模板中的按钮添加单击功能。我能看到的唯一解决方案是将按钮放在占位符中，并在我想要加载 div 时使用 $('select-playlist').show ，但另一种方法似乎更干净。

任何帮助将不胜感激，谢谢。

Answer 1

您可以使用事件委托(delegate)来解决动态内容的问题。既然您提到了 jQuery 可用，那么使用其内置的事件委托(delegate)支持 .on() 就可以轻松实现这一点:

$(document).on('click', '.playlist.recommentation', function() {
  // getArtistsAndRelated here.
});