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（...）为null。显然，即使将代码加载到文件中，代码也无法识别id。如何在javascript模板中的按钮中添加单击功能。我能看到的唯一解决方案是将按钮放在占位符中并使用$（'select-playlist'）。当我想加载div时显示，但另一种方法似乎更清晰。

非常感谢任何帮助，谢谢。

Answer 1

您可以使用事件委派来平滑动态内容的问题。由于您提到了jQuery可用，因此使用其内置的.on()事件委派支持可以轻松实现：

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

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

1 个答案: