加载 Handlebars 模板后按类名获取元素？答案

【问题标题】：Get elements by class name after Handlebars template is loaded?加载 Handlebars 模板后按类名获取元素？
【发布时间】：2020-04-04 18:57:04
【问题描述】：

我正在尝试按类名获取元素，但得到的是空数组。这是我使用的一个简单代码，它只是显示列表中的名称。

<html>
      <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
          <script id="test" type="text/template">
              <div>
                {% raw %}
                  {{#each users}}
                      <li class="user">{{this}}</li>
                  {{/each}}
                {% endraw %}
              </div>
          </script>

          <script>
              const template = Handlebars.compile(document.querySelector('#test').innerHTML);

              document.addEventListener('DOMContentLoaded', () => {
                      var users = ['Bob', 'Nick', 'Alice', 'Brian'];
                      const content = template({'users': users});
                      document.querySelector('#users_list').innerHTML = content;
              });
              var list = document.getElementsByClassName('user');
              console.log(list);
          </script>

      </head>
      <body>
          <ul id="users_list">
          </ul>
      </body>
  </html>

所以在我运行代码之后，console.log(list) 显示一个空数组。但是如果我把'document.getElementsByClassName('user');'在控制台中，我得到了一个包含 4 个元素的数组。

好像在我调用console.log(list)的那一刻，元素还没有被加载。

我已经尝试过的：

使用返回相同空列表的 jquery

$(window).on('load', function() {
    var list = document.getElementsByClassName('user');
    console.log(list)
});

运行模板 Handlebars 的函数，然后运行 'document.getElementsByClassName('user')' $.when(function1()).then(function())

预期结果 - 得到一个包含 4 个对象的数组

如何正确实现？

【问题讨论】：

标签： javascript

【解决方案1】：

您正在侦听事件，该事件将在您编写以下代码后触发。

【讨论】：

【解决方案2】：

发生的情况是事件侦听器正在运行您使用 user 类查询元素，所以当您这样做时，没有任何。

尝试在监听器中插入代码或完全摆脱监听器。

<script>
    const template = Handlebars.compile(document.querySelector('#test').innerHTML);

    document.addEventListener('DOMContentLoaded', () => {
        var users = ['Bob', 'Nick', 'Alice', 'Brian'];
        const content = template({'users': users});
        document.querySelector('#users_list').innerHTML = content;

        var list = document.getElementsByClassName('user');
        console.log(list);
    });
</script>

【讨论】：