共通で使う機能なので、app\assets\javascripts\common.js.coffeeにまとめたいのですが、そちらに置くと動作しません。
※application.jsの中に//= require commonを追加しました。
jsを直接htmlのbody上に記述すると動作します。
jsがやってることは、テーブル行をクリックすると、
セルの値をalert表示するだけです。
単純な動作ですが、なぜアセットパイプラインだと動作しないのでしょうか?
試しにcommon.js.coffeeに
alert('hello world')追加すると動作したので、
アセットパイプライン自体は動作しているようです。
宜しくお願い致します。
html側
index.html.erb(application.html.erbを利用)
html
1 2 3 4<table class="table table-list tbl-select-result-row" > 5 <thead> 6 <tr> 7 <th>社員コード</th> 8 <th>社員名</th> 9 </tr> 10 </thead> 11 12 <tbody> 13 <tr> 14 <td>113</td> 15 <td>織田信長</td> 16 </tr> 17 </tbody> 18 <tbody> 19 <tr> 20 <td>1204</td> 21 <td>平知盛</td> 22 </tr> 23 </tbody> 24 <tbody> 25 <tr> 26 <td>22</td> 27 <td>豊臣秀吉</td> 28 </tr> 29 </tbody> 30 31 </table> 32 33<script> 34 35 $('.tbl-select-result-row td').bind('click',function(){ 36 $tag_td = $(this)[0]; 37 $tag_tr = $(this).parent()[0]; 38 alert($(this).closest('tr').children('td').eq(0).text()); 39 40 }); 41</script> 42 43
app\views\layouts\application.html.erb
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>DEMO</title> 6 7 <!--[if lt IE 9]> 8 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 9 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 10 <![endif]--> 11 <%= csrf_meta_tags %> 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 14 15</head> 16
アセットパイプライン側
app\assets\javascripts\application.js
javascript
1//= require jquery 2//= require jquery-ui/widgets/datepicker 3//= require jquery-ui/i18n/datepicker-ja 4//= require jquery_ujs 5//= require turbolinks 6//= require_tree . 7//= require bootstrap-sprockets 8//= require data-confirm-modal 9 10//= require common 11
app\assets\javascripts\common.js.coffee
javascript
1$('.tbl-select-result-row td').bind 'click', -> 2 $tag_td = $(this)[0] 3 $tag_tr = $(this).parent()[0] 4 alert $(this).closest('tr').children('td').eq(0).text() 5 return 6
回答1件
あなたの回答
tips
プレビュー