JQuery - Как выбрать элемент, который создается после загрузки страницы - PullRequest
0 голосов
/ 12 июля 2010

У меня есть страница, на которой используется плагин Райана Бейтса nested_form .Плагин используется, когда у вас есть форма, основанная на одной модели, а затем дополнительные поля, которые принадлежат другой модели.Например, если бы у меня была форма, которая создавала категории, и в то же время я хотел добавить элементы в новую категорию, моя форма содержала бы поля ввода для модели категории и поля ввода для элементов, которые я хочу назначить новой категории.

Плагин Райана использует jQuery для создания кнопки, которая добавляет дополнительные поля ввода, поскольку пользователь может добавлять 2 или 10 элементов в категорию.

В моем случае я добавляю People вотчет.Это делается через «ссылки».Моя вложенная форма работает хорошо, но я также хочу, чтобы эти новые поля ввода были автозаполняемыми.Для этого я использую виджет автозаполнения jQuery UI 1.8.Это хорошо работает в других частях моего приложения.Но он не работает с этой вложенной формой.

Кажется, проблема в том, что мой javascript, который делает автозаполнение текстовых полей, загружается один раз в готовом документе.

Потом, когда я добавляю новые текстовые поля вмой nested_form, виджет автозаполнения не привязывается к ним, поскольку он уже загружен один раз.

Я могу ошибаться, но это только мое предположение.Кто-нибудь может подсказать, что делать.Ниже мой код автозаполнения (я не показал javascript nested_form, так как он все скрыт в плагине, и я не хочу ничего менять. Достаточно хорошо знать, что он работает, и теперь мне нужно сделатьмой виджет автозаполнения приспособлен для этого).

Это страница с 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">
-->

Пожалуйста, укажите мне в правильном направлении, как заставить автозаполнение захватывать вновь вставленные текстовые поля.

Дейл

Ответы [ 2 ]

1 голос
/ 12 июля 2010

Дейл, просто удар в темноте.Учитывая следующее:

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

Может ли функция использоваться с событиями .live или .livequery?Если это так, это может позволить вам сохранить целостность без дальнейших изменений кода.

0 голосов
/ 12 июля 2010
...