作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

画面の左半分に検索条件を入力し検索を実行、右半分を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としてはいけないことも忘れないように・・・

この記事へのコメント

まだコメントはありません