問題の概要
- jQueryでDOMを操作するプログラムを書いていたが、jQueryが全く効かない状況になった。
- 外部スクリプトファイルの読み込みが効かなくなった。
- 筆者はHTML4.0, XHTMLを趣味程度で触っていた。
問題点と原因(1)
- XHTMLでは、どのタグにも終了タグをつけなければならない点を筆者は記憶していた。
-
<br></br>を<br />と書くことができるのと同様に、<script src="hoge.js"></script>を<script src="hoge.js" />とすることができると思い込んでいた。 -
<br>は空要素タグであるが、<script>は空要素タグでないのが、挙動に差が出た原因だった。 - なお、終了タグを必ずつけなければならないのはXHTML独自の文法であり、HTMLは空要素タグには終了タグをつけてはいけないことになっている。
以下のウェブページが参考になった。
scriptタグをって書くと、なんで上手くいかないかまとめてみたAdd Starkisato_mii
問題点と原因(2) jQueryとAngularJSの同時読み込み
ざっとした流れ
- 上記の修正だけでは、期待するDOMの操作を行えなかった。
- jQueryとAngularJSが共存していたのがよくなかったようである。
- AngularJSの読み込みを停止することでDOM操作を行えるようになった。
具体例
jQueryとAngularJSの両方を読み込んでいるとドキュメントにHellow World!が表示されない。
jQueryが動作していないようである。
index.html
<html ng-app="formApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
$(function(){
$("#test").html("Hello World!")
});
</script>
<head>
<body>
<div id="test"></div>
</body>
</html>
AngularJSの読み込みを停止すると、ドキュメントにHello World!が表示される。
jQueryを読み込むことができていることがわかる。
index.html
<html ng-app="formApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>-->
<script>
$(function(){
$("#test").html("Hello World!")
});
</script>
<head>
<body>
<div id="test"></div>
</body>
</html>
筆者のメモ
- AngularJSは筆者の管理外で追加されたものだった（筆者はAngularJSに関しては未習熟である）。
- jQueryとAngularJSの相性に関しては、AngularJSを習熟した上で検討したい。