QA@IT

【Rails4.0】Turbolinksの遷移後にイベントハンドラを有効にする方法のベストプラクティスは?

3024 PV

rails4.0にて、Turbolinks機能ではページリンクでの遷移後には、
body,titleタグのみ更新され、documentのready、loadイベンドが発生しないと知りました。

「id「command_id」を持つselectフォームの値が変わった時、buttonフォームをクリックする」
というイベントハンドラを実現する場合に、下記(最下部のコード)のように実装すると想定する動作を実現できました。

しかし、ページready後?の$(function(){});と、$(document).on('page:load', function(e) {});に同じ処理を記述することになるため、煩雑なコードに思えます。(前者は、#command_idのDOMが存在するページをロードした時のための記述で、後者は、別のページからTurbolinksのページ遷移にて#command_idのDOMがあるページに遷移した時のための記述です。)

ネットで調べてみると、jquery.turbolinksというgemで対処する方法があるようですが、gemを追加せずに、上記の動作を実現する場合には、
どうようなコーディングがよいのでしょうか。アドバイスをお願い致します。

(function() {
    function commandSearch(){
        $('#command_id').change(function(){
            $('#command_search_button').click();
        }); 
    };

    $(function() {
        commandSearch();

    });

    $(document).on('page:load', function(e) {
        commandSearch();

    });
})();

  • 回答という程では無いのでコメントで。
    turbolinksを使う場合、そもそも画面遷移ごとにイベントを定義するという方法を取るべきでは無いように思います。
    この場合、共通の初期化処理で全てを済ませてしまう方がハマる事が少ないはずです。
    $(document).on('change', '#command_id' function() { ...
    を1回だけ呼ぶ、という感じで
    -
  • 回答ありがとうございます。上記の記述で初期表示時とページ遷移時ともに動作しました。$(document).onはページ全体を対象にイベントハンドラを定義してしまうイメージですかね。比べて$('#command_id')はページに対象がなくなったらイベントハンドラが消える?違いを調べてみます。ありがとうございました。検索で辿られる方のために回答に動作するしないのコードを記載させて頂きます。 -

回答

joker1007様の回答により解決致しました。
以下、たどり着いた方のためにコードを記載しておきます。

意図した動作するコード

$(function() {
    //$('#command_name').change(function(){
    $(document).on('change', '#command_name', function(){
        $('#command_search_button').click();
    });
    $(document).on('change', '#category_id', function(){
        $('#command_search_button').click();
    });
})();

意図した動作シないコード

$(function() {
    $('#command_name').change(function(){
        $('#command_search_button').click();
    });
    $('#category_id').change(function(){
        $('#command_search_button').click();
    });
})();
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。