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

【问题标题】：How to use getElementById on an element in a javascript template如何在 javascript 模板中的元素上使用 getElementById
【发布时间】：2015-07-06 01:25:09
【问题描述】：

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

<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 加载到文件中，代码也无法识别该 id。如何向 javascript 模板中的按钮添加点击功能。我能看到的唯一解决方案是将按钮放在占位符中并在我想加载 div 时使用 $('select-playlist').show ，但另一种方法似乎更干净。

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

【问题讨论】：

我假设附加是在调用 getElementById 之后发生的？可能是这个原因，但看不到代码只能推测
"我将以下 html 附加到占位符中"。请提供执行此操作的代码。另请注意您的script 元素没有类型属性，这意味着text/javascript。要么使用自定义type，要么使用HTML5 templates。

标签： javascript jquery html spotify

【解决方案1】：

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

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

【讨论】：