javascript - 访问 DOM 元素并不总是有效

javascript - 访问 DOM 元素并不总是有效 - jQuery

转载作者：太空宇宙更新时间：2023-11-04 16:17:42

我正在尝试执行访问页面中元素的代码。

我的 HTML 代码如下所示:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="container">
        <input type="text" id="user" /> 
        <input type="button" id="add" value="add"/>
        <ul id="peopleList">
        </ul>
        <script type="text/x-handlebars-template" id="template">
        {{#each people}}
        <li>{{.}}</li>
        {{/each}}
        </script>
     </div>
</body>

我的 JavaScript 代码如下所示:

    (function(){
  var people = {
    people: ["first", "second"], 
    init: function(){
      this.cacheDOM();
      this.render();
    },
    cacheDOM: function(){
      this.$dm = $("#container"); 
      this.$userField = this.$dm.find('#user');
      this.$submitButton = this.$dm.find('#add');
      this.template = this.$dm.find("#template").html();
      this.$peopleList = this.$dm.find("#peopleList");
    },
    render: function(){
      var compiled = Handlebars.compile(this.template);
      this.$peopleList.html(compiled(this.people));
    },
  };

  people.init();
})();