Railsで生成されたテーブル行をクリックできません

タイトルで言うように、selection-tableのテーブル行のいずれかをクリックしても何も行われません。最初の警告 - alert("It works on each visit!"); - はすべてのページの読み込み時に実行されます。私は.clickとon('click',function)を試してみました。私は私が見ることができないテーブル行を横断するには、愚か/単純な間違いをした以外は、これがうまくいかない理由を考えることができません。Railsで生成されたテーブル行をクリックできません

$(document).on('turbolinks:load', function() { 
 
    alert("It works on each visit!"); 
 
    $('#selection-table tbody tr:not(:first-child)').each(function() { 
 
     $(this).click(function() { 
 
      alert("row clicked"); 
 
      var ID = $(this).first().html(); 
 
      $('#tokemon_trainer_id').val(ID); 
 
     }); 
 
    }); 
 
});

<table id="selection-table" class="w3-table w3-striped w3-bordered w3-border w3-hoverable" > 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     </tr> 
 
     <% @list_of_trainers.each do |trainer| %> 
 
     <tr class="selection-row"> 
 
     <td><%= trainer.id %></td> 
 
     <td><%= trainer.name %></td> 
 
     </tr> 
 
     <% end %> 
 
    </table>

出典

2016-10-13 Extreme112

turbolinksのドキュメントから：

可能、turbolinksの使用は避けてください：loadイベントをページ本体の要素にリスナー直接イベントを追加します。代わりに、イベント委任を使用して、ドキュメントまたはウィンドウにイベントリスナーを一度登録することを検討してください。

彼らは文書が（すなわち、あなたの行は実際には存在しないかもしれない - そう、何も取り付けられていないになるだろう）のロードが終了する前にturbolinks:loadが発生しない保証されていないので、彼らはこの勧告を行います。以下のコードは、イベントの委任を使用しています。提案のための

$(document).on('click', '#selection-table tbody tr:not(:first-child)', function() { 
    alert("row clicked"); 
    var ID = $(this).first().html(); 
    $('#tokemon_trainer_id').val(ID); 
});

$(document).on('click', '#selection-table tbody tr:not(:first-child)', function() { 
 
    console.log("row clicked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
\t <div id='result'></div> 
 
<table id="selection-table"> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr class="selection-row"> 
 
    <td><%= trainer.id %></td> 
 
    <td><%= trainer.name %></td> 
 
    </tr> 
 
</table> 
 
</body>

出典

2016-10-13 02:56:48 Tibrogargan

おかげで、それはまだ動作しません。私はイベントの委任を見て、あなたのコードは理にかなっています。おそらく、私はレールのアセットパイプラインを間違って使用していますか？私は 'assets/javascripts'フォルダにJSファイルを持っていますが、マニフェストファイルに正しいものが含まれていると思います。私は 'gem jquery-rails'をインストールしました。この行は' application.html.erb'の '<％= javascript_include_tag 'application'、 'data-turbolinks-track'： 'reload'％>'です。今何をすべきかわからない。 – Extreme112

決して使用されていないturborails残念ながら、その部分で助けてはいけません。それをjsfiddleに入れるというアイデアかもしれません。上記のコードが正しいことを確認しました（スニペットを参照）。 'id'の問題やテーブル構造の問題かもしれません – Tibrogargan

@ Extreme112レンダリングされたテーブルのソースを見てみるのもいいかもしれません。もっと手がかりを与えるかもしれない。または、クリックセレクタを ''＃selection-table tbody tr：not（：first-child）の代わりに '' .selection-row''に変更してください。 '' – Tibrogargan

Railsで生成されたテーブル行をクリックできません

答えて

関連する問題