Javascript 为什么在AJAX渲染后，我的typeahead表单字段不起作用？

我有一个

凭单#index.html.erb

，希望在其中创建凭单。我可以成功地呈现我的表单，但问题是我的typeahead字段不起作用

我已将此按钮设置为渲染_表单：

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

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

_form.html.erb（仅包括typeahead字段）

凭证

有多个：voucherdetails

，

接受嵌套的属性\u用于：voucherdetails，allow\u destroy:：true

凭证详细信息

属于：凭证

我想指出的是，如果我通过访问url凭证/new来呈现表单，那么typeahead可以工作。我认为问题在于，在AJAX调用之后，我没有正确初始化typeahead

注意，我使用的是bootstrap3-typeahead.jsv4.0.2

---

我从以前的开发人员那里继承了这个代码库（因此在places中使用了奇怪的命名）。

来回答我自己的问题；我把

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

&它起作用了。我以前尝试过这一点，但认为这次的区别在于

$（“#客户搜索”）。在（“更改”上，“#凭证…”

而不是

$（文档）。在（“更改”）上……

它通过AJAX调用初始化typeahead

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

<%= 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 %> 

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