【问题标题】:jQuery - How to select an element that is created after page loadjQuery - 如何选择页面加载后创建的元素
【发布时间】:2010-07-12 14:16:22
【问题描述】:

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

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">
-->

请指出正确的方向,让我自动完成以获取新插入的文本字段。

戴尔

【问题讨论】:

    标签: javascript jquery jquery-ui autocomplete nested-forms


    【解决方案1】:

    戴尔,只是在黑暗中刺伤。鉴于以下情况:

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

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

    【讨论】:

    • 谢谢@Jim。似乎 .live 可以为我工作,除了有一点我不清楚如何实施。新创建的 html 文本字段由 Ryan B 的nested_form 插件创建。自动完成功能是我添加到新创建的 html 中的功能。我不想编辑 Ryan 的 nested_form javascript,因为那样会影响每个我不想要的使用 nested_form 的实例。所以不知何故,我需要将自动完成功能附加到新创建的 html 文本字段,而不修改创建文本字段的 javascript。
    • dale,是否可以更改:$('[id$=origin_id]').autocomplete({ to: $('[id$=origin_id]').live('autocomplete' , {
    • 不确定上述方法是否可行,但这是我倾向于在不了解所有细节的情况下接近它的标准方式。
    • 再次感谢吉姆的意见。您的解决方案似乎是正确的。你能帮我理解如何实现这一点吗?我已经在gist.github.com/487117 上发布了我的代码并附有注释,一旦我解决了这个问题,我将更新我的stackoverflow 问题以反映这一点。谢谢。
    • 好的,Jim,与朋友一起完成了实施,并通过现场活动完成了这项工作。谢谢你的帮助。对于其他对如何实施现场活动感兴趣的人,我在gist.github.com/487117 发表了评论,其中包含对我有用的代码。
    【解决方案2】:

    使用 YUI :-D :-D

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

    或者,这个问题可能会对你有所帮助:

    Is there a onAvailable() function in jQuery?

    【讨论】:

    • 这应该是评论而不是答案。
    • 我正要编辑 - 我提供的链接建议使用 live()
    猜你喜欢
    • 1970-01-01
    • 2017-09-21
    • 2010-10-24
    • 1970-01-01
    • 2016-08-07
    • 1970-01-01
    • 1970-01-01
    • 2012-10-21
    • 2011-04-14
    相关资源
    最近更新 更多