HTMLを一部更新した場合にCoffeeScriptが効かない現象

画面の左半分に検索条件を入力し検索を実行、右半分をrenderして検索結果を表示する画面を作成中にぶち当たりました。
結果表示で縦スクロールする場合は、CSSで用意したマークをクリックすることで、CoffeeScriptのclickイベントで画面上部に戻る機能を実装しようとしていました。

【jQuery】自動スクロールで任意の位置まで移動させるボタンの作り方

ここを参考にして

_ajax_partial.html.erb

<div class="move_top"></div>

pages.coffee

$move_top = $('.move_top')
	
$move_top.on 'click', ->
      $('body, html').animate scrollTop: 0, 'slow'

と書いた（cssは参考ページのコピペ）。しかし、クリックしてもイベントが起こらないようである・・・

どうやらscriptとhtml.erbは検索条件の方のhtmlを読み込む際に結びつくため、ajax_partial.html.erbを読み込んだ後には、追加したクラス（.move_top）はscript側との結びつきがなく発火しなかったようです。対策は以下を参考に、coffeescriptに書きました。

後から追加した要素にもイベントを設定させる

pages.coffee

  $(document).on 'click','.move_top', ->
      $('body, html').animate scrollTop: 0, 'slow'

二つ目の引数には要素の文字列を指定するので、$move_topとしてはいけないことも忘れないように・・・