在 spotify 模板中获取 td 元素的内容

Question

我正在使用 spotify Web API 并下载了他们关于获取用户播放列表的教程。那部分工作得很好。但是我已将轨道 ID 添加到表中，现在我想在单击特定表行时将其存储在变量中。这是 id 部分的 spotifys 代码：

  <script id="playlist-detail-template" type="text/x-handlebars-template">
      <h2>{{name}}</h2>
      <p>{{{description}}}</p>
      {{#if images.length}}
      <img style="background-image:url({{images.0.url}})" class="cover"/>
      {{/if}}
      <table id="clickable">
          <tr>
              <th>Track</th>
              <th>Artist</th>
              <th>Album</th>
              <th>Track URI</th>
          </tr>
      {{#each tracks.items}}
          <tr >
              <td>{{track.name}}</td>
              <td>
                  {{#each track.artists}}
                      {{name}}
                  {{/each}}
              </td>
              <td>{{track.album.name}}</td>
              <td class="trackID">{{track.uri}}</td>
          </tr>
      {{/each}}
      </table>
  </script>

这是我提取 id 的代码：

$( document ).ready(function(){
    $('#clickable tr').click(function() {
        console.log('Function executed');
        var trackID = $(this).find('.trackID').text();
        console.log(trackID);
    });
});

提取代码完美运行，因为我已经在自己制作的桌子上尝试过它。但是当我单击时，绝对没有任何反应。它甚至不记录“功能执行”部分。我猜这是因为它是一些我以前从未见过的脚本模板，但我不知道该怎么做才能修复它。有人有什么想法吗？

Answer 1

试试这个：

$( document ).ready(function(){
    $('#clickable tr').each(function() {
        console.log('Function executed');
        var trackID = $(this).find('.trackID').html();
        console.log(trackID);
    });
});