AJAXレンダリング後に私の先読みフォームフィールドが機能しないのはなぜですか？

Question

私はvouchers#index.html.erbを持っています。伝票を作成したいと思っています。私は正常に私のフォームをレンダリングすることができますが、私の問題は、私のtypeaheadフィールドが動作していないということです。

私は_formをレンダリングするためにこのボタンを設定している：

<div class='row'> 
    <%= link_to 'New Voucher', new_voucher_path, id: 'new_voucher_btn', class:'btn btn-md btn-primary', remote: true %> 
    </div> 

マイコントローラー：

def new 
    @voucher = Voucher.new 
    @voucher.voucherdetails.build 

    respond_to do |format| 
     format.html # new.html.erb 
     format.json { render json: @voucher } 
     format.js 
    end 
    end 

New.js.erb

$('#new_voucher_btn').hide().after('<%= j render("form") %>'); //Hide 'New Voucher' button after clicking. 
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy" }); //add the datepicker 

Voucher.js

jQuery(function() { 
    var customers = jQuery.parseJSON(gon.customer_typeahead) 
    // This shows the Typeahead when typing 
    $('.search_cst').typeahead({ 
    source: customers, 
    display: 'name', 
    val: 'id' 
    }); 
    //This sets the value of customer 
    $('#customer_search').on("change", '#voucher_voucherdetails_attributes_0_s002', function() { 
    if (this.value != '') { 
     var current =$('.search_cst').typeahead("getActive"); 
     if (current) { 
     $('.search_cst').val(current.name); 
     $('.search_cst_id').val(current.id); 
     } 
    } else { 
     $('.search_cst').val(''); 
     $('.search_cst_id').val(''); 
    } 
    }); 

}); //Function 

_form.html.erb（先行入力フィールドのみを含む）

<%= f.fields_for :voucherdetails do |vd| %> 
    <div class='form-group' id='customer_search' data-provide="typeahead"> 
    <%= vd.label :s002, "Customer:" %> 
    <%= vd.text_field :s002, class:'search_cst form-control' %> 
    <%= vd.hidden_field :s002, class: 'search_cst_id' %> 
    </div> 
<% end %> 

Aバウチャーhas_many :voucherdetails & accepts_nested_attributes_for :voucherdetails, allow_destroy: :true。

Voucherdetail belongs_to :voucher

私は私が新しいURLバウチャー/にアクセスし、フォームをレンダリングする場合の先行入力が機能することに注意したいと思います。問題は、私がAJAX呼び出しの後に型式を正しく初期化していないということです。

N.B私は前の現像剤（場所における従って奇数命名）からこのコードベースを継承4.0.2 Found Here

bootstrap3-typeahead.js Vを使用しています。

Answer 1

私自身の質問に答えるには、私はそれが働いたnew.js.erb &中に、

var customers = jQuery.parseJSON(gon.customer_typeahead) 
// This shows the Typeahead when typing 
$('.search_cst').typeahead({ 
    source: customers, 
    display: 'name', 
    val: 'id' 
}); 
//This sets the value of s002 
$('#customer_search').on("change",'#voucher_voucherdetails_attributes_0_s002', function() { 
    if (this.value != '') { 
    var current =$('.search_cst').typeahead("getActive"); 
    if (current) { 
     $('.search_cst').val(current.name); 
     $('.search_cst_id').val(current.id); 
    } 
    } else { 
    $('.search_cst').val(''); 
    $('.search_cst_id').val(''); 
    } 
}); //Customer_search on change 

を置きました。私は以前これを試しましたが、今度は$(document).on("change")...;の代わりに$('#customer_search').on("change", '#voucher...;の違いがあると思っています。AJAX呼び出しで先読みを初期化します。