jQuery - How to select an element that is created after page load

Question

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

Answer 1

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.

Answer 2

Use YUI :-D :-D

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

Or, this question might help you:

Is there a onAvailable() function in jQuery?