为什么我的typeahead表单字段在AJAX呈现之后不起作用？

我有一个vouchers#index.html.erb其中我想要创建一个优惠券。我可以成功地呈现我的表单，但是我遇到的问题是我的typeahead字段不起作用。为什么我的typeahead表单字段在AJAX呈现之后不起作用？

我已经将这个按钮来呈现_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 %>

凭单has_many :voucherdetails & accepts_nested_attributes_for :voucherdetails, allow_destroy: :true。

Voucherdetail belongs_to :voucher

我想指出的是，预输入工作，如果我通过访问URL凭单/新的渲染形式。我相信问题是我没有在AJAX调用之后正确地初始化typeahead。

N.B我使用bootstrap3-typeahead.js v 4.0.2 Found Here

我继承了这个代码库从以前的开发者（因此，在地方奇数命名）。

来源

2017-03-01 ThorTL67

回答我自己的问题;我把

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

进入new.js.erb &它的工作。我以前曾尝试过这种方法，但认为这次的差别是$('#customer_search').on("change", '#voucher...;而不是$(document).on("change")...;

哪个初始化通过AJAX调用的typeahead。

来源

2017-03-01 13:45:18 ThorTL67

为什么我的typeahead表单字段在AJAX呈现之后不起作用？

回答

相关问题