teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記部分に関する回答

2016/05/02 03:39

投稿

miyabi-sun
miyabi-sun

スコア21454

answer CHANGED
@@ -10,4 +10,38 @@
10
10
 
11
11
  $('.pay_category').on
12
12
  'change': -> console.log 'change'
13
- ```
13
+ ```
14
+
15
+ ---
16
+
17
+ > 追記部分
18
+
19
+ そもそもCoffeeスクリプトで書いたconsole.logが出力されている時点でつなぎ込みは正常に行われています。
20
+
21
+ 根本のブラウザ+JavaScriptの仕様として、
22
+ JavaScriptはscript要素で読み込まれた瞬間実行されます。
23
+ script要素が書かれている内容のJavaScriptの動作が全て終わらない限り、以降の要素は基本的に1行も解析されません。
24
+
25
+ 上記仕様により、
26
+ 例えばCoffeeScriptで生成されたJavaScriptのファイルがhead要素の配下にある場合、
27
+ まだレンダリングされる前の存在しないbodyの中身を必死に探して何もないという結果が帰ってきます。
28
+
29
+ ブラウザはbodyの中身を全て解析し終わった後、loadイベントを発行します。
30
+
31
+ body要素のonLoad属性に発火して欲しい処理を記載したり、
32
+ jQueryのready機能を使うことでDOM構造の構築が終わってから処理を始める事ができます。
33
+ (body要素のonLoad属性は上書きされて古い設定が用意に消えるので、jQueryのready機能を使うことです)
34
+
35
+ ファイルを下記のように変更すれば動くと思いますので試してみてください。
36
+
37
+ ```CoffeeScript
38
+ $ ->
39
+ console.log('test')
40
+
41
+ #追加
42
+ test = $('#textone').val()
43
+ console.log(test)
44
+
45
+ $('#pay_category').on 'change', ->
46
+ console.log 'change'
47
+ ```