jQuery-UI 自动完成小部件未绑定到 Rails 中加载的 ajax 部分表单答案

【问题标题】：jQuery-UI Autocomplete Widget not binding to ajax loaded partial form in RailsjQuery-UI 自动完成小部件未绑定到 Rails 中加载的 ajax 部分表单
【发布时间】：2012-11-05 22:54:36
【问题描述】：

我有一个带有使用 jQuery-UI 自动完成小部件的文本字段的表单。我正在使用 AJAX 和 Ruby on Rails <li id="activity_<%= activity.id %>"><%= link_to activity.address, edit_activity_path(activity), :remote => true %></li> 将此表单作为部分加载

由于表单是在 document.ready 之后加载的，因此自动完成 jQuery 小部件没有绑定到 DOM 元素。

由于这不是一个 jQuery AJAX 调用，我认为在 Ajax 调用之后没有可以用来绑定自动完成小部件的成功回调。

我不确定如何使用我在自动完成小部件中看到的 .on() 函数，因为语法是 $('selector').autocomplete

有人可以帮忙吗？

这是edit.js.erb文件：

$("#activity_form").html("<%= escape_javascript(render(:partial => "form"))%>");

这是我的 jQuery 代码，用于将自动完成小部件绑定到我的文本字段。

jQuery ->       
$('[type="text"][name*="[geocode_location]"]').autocomplete
  source: (request, response) ->
    $.ajax 
      url: "http://ws.geonames.org/searchJSON"
      dataType: "jsonp"
      data: 
        featureClass: "P"
        style: "full"
        maxRows: 12
        name_startsWith: request.term

      success: (data) ->
        response $.map(data.geonames, (item) ->
          label: item.name + ((if item.adminName1 then ", " + item.adminName1 else "")) + ", " + item.countryName
          value: item.lat + ", " + item.lng
        )
  minLength: 2

  open: ->
    $(this).removeClass("ui-corner-all").addClass "ui-corner-top"

  close: ->
    $(this).removeClass("ui-corner-top").addClass "ui-corner-all"
  focus: (event, ui) ->
    event.preventDefault()
    $(this).val ui.item.label      
  select: (event, ui) ->
    event.preventDefault()
    $(this).val ui.item.label
    $(this).siblings('[name*="[geocode_ll]"]').val ui.item.value

【问题讨论】：

标签： jquery ruby-on-rails ajax ruby-on-rails-3 jquery-ui

【解决方案1】：

我在这里读到了每个 Rails Ajax 调用可以绑定到的 6 个自定义事件，包括 ajax:success，只要有成功的 ajax 请求就会触发。

http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/

所以我做了 $(this).bind "ajax:success"，它允许 $(this) 在这种情况下是整个窗口，在任何 "ajax:success" 事件之后触发一些其他功能。

所以，我最终这样做了：

jQuery ->
  $(this).bind "ajax:success", -> 
    jQuery ->       
      $('[type="text"][name*="[geocode_location]"]').autocomplete
       --REST OF CODE--

【讨论】：

哥，你帮我省了不少苦！

【解决方案2】：

我遇到过类似的情况，在 ajax 调用后渲染包含自动完成输入字段的部分时，自动完成不再起作用。我正在使用rails3-jquery-autocomplete gem。

问题很简单，所有自动完成输入字段仅在初始文档加载时绑定到自动完成功能。要再次绑定新的自动完成字段，只需调用以下函数：

jQuery('input[data-autocomplete]').railsAutocomplete();

【讨论】：

【解决方案3】：

$('[type="text"][name*="[geocode_location]"]').live("自动完成", function(){ 你的代码})

请尝试。

【讨论】：

我试过了，它似乎不起作用。它破坏了自动完成功能。