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

发布于 2024-09-09 23:13:31 字数 2499 浏览 5 评论 0原文

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

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

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

问题似乎是我的 javascript 使文本字段可自动完成，在文档准备好后加载一次。

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

我可能是错的，但这只是我的猜测。任何人都可以建议该怎么做。下面是我的自动完成代码（我没有显示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">
-->

请为我指出正确的方向，了解如何让我的自动完成功能抓取新插入的文本字段。

戴尔

原文

I have a page that uses Ryan Bates nested_form plugin. The plugin is used when you have form based on one model and then additional fields that belong to another model. For example if I had a form that created categories, and at the same time I wanted to add items to the new category, my form would contain input fields for the category model and input fields for items I want to assign to the new category.

Ryan's plugin uses jQuery to create a button that adds additional input fields as the user might what to add 2 items or 10 items to the category.

In my case, I am adding People to a Report. This is done through 'links'. My nested form works nicely, but I also want these new input fields to be autocompletable. To do this I am using the jQuery UI 1.8 autocomplete widget. It is working nicely in other parts of my app. But it is not working on this nested form.

The problem seems to be that my javascript that makes textfields autocompletable, loads once on document ready.

Then later, when I add new textfields in my nested_form, the autocomplete widget does not get attached to these as it has already loaded once.

I could be wrong but this is just my guess. Could anyone suggest what to do. Below is my autocomplete code (I have not shown the nested_form javascript as it is all hidden away in the plugin, and I don't really want to change any of it. It's good enough to know that it works and now I need to make my autocomplete widget accommodate for this).

This is the page with 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">
-->

Please point me in the right direction on how to get my autocomplete to grab the newly inserted textfields.

Dale

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沩ん囻菔务 2024-09-16 23:13:31

戴尔，只是在黑暗中刺伤。考虑以下情况：

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

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

Dale, just a stab in the dark. Given the following:

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

Can the function be used with the .live or .livequery events? If so, this may allow you to keep the integrity in place without further code changes.

回复收藏 0 原文