Question

我有一个使用Ryan Bates nested_form plugin的页面。当您具有基于一个模型的表单，然后是属于另一个模型的其他字段时，将使用该插件。例如，如果我有一个创建类别的表单，同时我想将项目添加到新类别，我的表单将包含类别模型的输入字段和我想要分配给新类别的项目的输入字段。

Ryan的插件使用jQuery创建一个按钮，添加额外的输入字段，因为用户可能会向该类别添加2个项目或10个项目。

就我而言，我正在将人员添加到报告中。这是通过“链接”完成的。我的嵌套表单很好用，但我也希望这些新的输入字段能够自动完成。为此，我使用jQuery UI 1.8自动完成小部件。它在我的应用程序的其他部分工作得很好。但它不适用于这种嵌套形式。

问题似乎是我的javascript使文本字段自动填充，在文档就绪时加载一次。

然后，当我在我的nested_form中添加新的文本字段时，自动完成小部件不会附加到这些，因为它已经加载了一次。

我可能错了，但这只是我的猜测。任何人都可以建议做什么。下面是我的自动完成代码（我没有显示嵌套_形式的javascript，因为它全部隐藏在插件中，我真的不想改变其中任何一个。它足以让它知道它有效，现在我需要制作我的自动完成小部件适用于此。）

这是包含javascript：

的页面

<script>
// origin_person auto selector
    $(function() {

    $('[id$=origin_id]').autocomplete({
    minLength: 2,
    source: '/people.json',
    focus: function(event, ui) {
        $('[id$=origin_id]').val(ui.item.person.given_name);
        return false;
    },
    select: function(event, ui) {
        $('[id$=origin_id]').val(ui.item.person.given_name);
   $('[id^=hidden_origin]').val(ui.item.person.id);
        return false;
    }
})

.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.person.given_name + "</a>" )
        .appendTo( ul );
};
});
</script>

<!-- Start of form partial for my new report view -->

<% f.fields_for :links do |link_form| %>
  <%= link_form.text_field :origin_id %>
  <%= link_form.text_field :rcvd_id %> 

<%= link_form.link_to_remove "Remove this link" %> 

<% end %>

<%= f.link_to_add "Add a link", :links %>
<!-- The above link_to_add helper is part of the nested_form plugin. 
Using jQuery it will insert the following fields. Notice that the IDs 
are also dynamic which I am trying to connect to. -->

<!-- <input type="text" size="30" name="report[links_attributes][1278921811834][origin_id]" 
      id="report_links_attributes_1278921811834_origin_id" class="ui-autocomplete-input" 
      autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

      <input name="link[origin_id]" id="hidden_origin_id" class="ui-autocomplete-input" 
      autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-->

请指出我如何让我的自动填充功能获取新插入的文本字段。

戴尔

Answer 1

戴尔，只是在黑暗中刺伤。鉴于以下内容：

$(function() { $('[id$=origin_id]').autocomplete({...});

该功能可以与.live或.livequery事件一起使用吗？如果是这样，这可能允许您保持完整性，而无需进一步更改代码。

Answer 2

使用YUI :-D :-D

http://bubbling-library.com/eng/api/docs/plugins/dispatcher

或者，这个问题可能会对您有所帮助：

Is there a onAvailable() function in jQuery?

jQuery - 如何选择页面加载后创建的元素

2 个答案: