1
ページ内の要素にアクセスするコードを実行しようとしています。DOM要素へのアクセスが必ずしも機能していない - jQuery
私の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();
})();
実行中に、私はへのアクセスを持っていないように、それはそうですDOMエレメントは未定義ですが、このチュートリアルでこのコードを使用しましたが、https://www.youtube.com/watch?v=m-NYyst_tiY&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f&index=2
ビデオでは、彼は$（document）.readyを使用していませんが、すぐに彼はDOM要素にすぐにアクセスできます。なぜ違うのですか？
ビデオの男が、javascriptファイルをhtml要素の後にさらにDOMの下に配置していたためです。この方法では、DOMはすでにjavascriptが実行されるまでにロードされます。 – Richard
ああ、意味がある。ありがとうございました。私はそれを閉じることができるように答えとしてそれを追加してください – Jacky
あなたは大歓迎です。あなたが要求した通りに答えとしてそれを掲示してください。 – Richard