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

【问题标题】：Why is my typeahead form field not working after AJAX render?为什么我的 typeahead 表单字段在 AJAX 渲染后不起作用？
【发布时间】：2017-03-01 11:54:21
【问题描述】：

我有一个vouchers#index.html.erb，我想在其中创建一个凭证。我可以成功呈现我的表单，但我遇到的问题是我的预输入字段不起作用。

我已将此按钮设置为呈现 _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。

优惠券详情belongs_to :voucher

我想指出，如果我通过访问 url 凭证/新来呈现表单，则预输入有效。我认为问题在于我没有在 AJAX 调用之后正确初始化预输入。

注意，我正在使用 bootstrap3-typeahead.js v 4.0.2 Found Here

我从以前的开发人员那里继承了这个代码库（因此有些地方的命名很奇怪）。

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-5

【解决方案1】：

回答我自己的问题；我放了

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。

【讨论】：