rails4でのajaxを用いた連動プルダウン（３階層）実装について

前提・実現したいこと

rails4でajaxを使用した連動プルダウンの実装を試みているのですが、理想形が３階層のプルダウン（例として、都道府県［Prefecture］→市区町村「City」→郵便番号［Number］）での記述の仕方がわかりません。

発生している問題・エラーメッセージ

色々ググってみた結果様々なアプローチがあるようですが、現状下記のコードで２階層までの連動プルダウンが実現できており、あと一息で３階層ができそうなのですが、２階層目を選択した時点で３階層目が"3階層目が表示されるよ！"部分に表示されずそのままで、反応していないようです。特別エラーを吐いている様子はないのですが、パラメータ[params[:number_id]]が３階層目に飛んでいない（ajax処理ができていない？）ことは確認済みです。

尚、参考サイト（２階層まではこちらを参考）のソースをそのまま模写している部分があるため、不自然な点があるかもしれません。

下記ソースの内容や別アプローチを含め、このような場合のベストプラクティスをご教授いただけますと幸いです。よろしくお願いします。

ソースコード

#ajax_controller.rb
class AjaxController < ApplicationController
  def search
    @prefectures=Prefecture.select(:prefecture_name,:id,:city_id).distinct
  end

  def result
    @cities=City.where(prefecture_id:params[:city_id])
  end

  def result2
    @numbers=Number.where(city_id:params[:number_id])
  end
end

#search.html.erb

<%= select_tag(:city_id, options_from_collection_for_select(@prefectures, :city_id, :prefecture_name),:id=>'pub',:prompt => "都道府県を選択してください",
   data:{
        remote:true,
        url:url_for(action: :result)
        }
)%>
<span id="result">
"２階層目が表示されるよ！"
</span>
<span id="result2">
"3階層目が表示されるよ！"
</span>

//result.js.erb
//2階層目のjs

$(function(){
      $('#result').html("<%= escape_javascript(render 'search_result') %>");
    $('#pub').change(function(){
    })
});

#_search_result.html.erb
#２階層目の部分テンプレート
<%= select_tag(:number_id,options_from_collection_for_select(@cities,:number_id,:city_name),:id=>'pub',
     data:{
        remote:true,
        url:url_for(action: :result2)
        }
  )
%>

//result2.js.erb
//3階層目のjs

$(function(){
      $('#result2').html("<%= escape_javascript(render 'search_result2') %>");
    $('#pub').change(function(){
    })
});

#_search_result2.html.erb
#3階層目の部分テンプレート
<%= select_tag(:id,options_from_collection_for_select(@numbers,:id,:number),:id=>'pub')%>

#routes.rb
 get 'ajax/search'
 get 'ajax/result'
 post '/ajax/result'
 get 'ajax/result2'
 post '/ajax/result2'

補足情報(言語/FW/ツール等のバージョンなど)

ruby 2.1.3
Rails 4.2.5