Rails: вложенная удаленная форма не работает при загрузке страницы

У меня есть приложение Rails, в котором у меня есть форма, которая выглядит примерно так:

[ Parent list item 1 ]
[ Parent list item 2 ]
[ Parent list item 3 - expanded ]
    [ Child list item 1 ]
    Child inline input       Child submit button
    ------------------

[Parent input]
Parent submit button

Вход родительского объекта всегда работает. Это удаленная форма, используя remote: true. Когда я добавляю родительский объект, он автоматически добавляется в список с другими родительскими объектами. У каждого родителя может быть много детей, они отображаются и отображаются, когда пользователь расширяет соответствующий элемент родительского списка (например, пример выше). Пользователи могут добавлять больше детей, введя значение в Child inline input, эта форма также использует remote: true.

Проблема, с которой я сталкиваюсь, заключается в том, что элемент add children не всегда работает при загрузке первой страницы. Он работает, однако, если я обновляю страницу. Мне трудно понять, почему это так.

Когда я создаю родительский объект, отображается следующий js.erb:

# screen_table_id is the list with parent objects.
# localized_strings/localized_string is the tr with the object
$("#screen_table_<%= @localized_string.screen.id %>").append("<%= j render   partial: 'localized_strings/localized_string', locals: { screen:  @localized_string.screen, localized_string: @localized_string }  %>");

# I use the best in place gem to manage inline editing
jQuery('.best_in_place').best_in_place()

Соответствующие части localized_strings/localized_string выглядят следующим образом:

%tbody{ id: "localized_string_parent_#{localized_string.id}"}
  %tr
    %td.expandable-column
      Clicking this reveals the child objects

/ The list of children is initially hidden
%tbody.hidden[localized_string]

  - if localized_string.translations.any?
    / Renders the children
  %tr
    / This form doesn't work on page load, after I have added the parent
    = render "translations/inline_form", app: localized_string.screen.app,  screen: localized_string.screen, localized_string: localized_string, translation:  localized_string.translations.build

И translations/inline_form выглядит следующим образом:

= form_for [app, screen, localized_string, translation], remote: true do |f|
  %td{ colspan: 2 }
    .inline-form-group
      = f.text_field :value, class: "form-control inline-form-control",  placeholder: "Translation value", id: "localized_string_input_# {localized_string.id}"

  %td
    / Sometimes nothing happens when I click Submit.
    = f.submit 'Add translation', class: "btn ban-success-outline"

Неверный поток выглядит следующим образом:

• Загрузка страницы, и я создаю родительский объект (LocalizedString)
• Он правильно добавлен в список.
• Расширение нового родительского элемента списка работает как ожидалось.
• При нажатии кнопки отправки для дочернего элемента (Translation) выполняется nothing.

Надеюсь, мой вопрос будет понятен. Прошу прокомментировать, если у вас есть какие-либо комментарии или требуется разъяснение. Я полностью поглощен всеми идеями.

Ответы

%tr
  = render "translations/inline_form", app: localized_string.screen.app,   screen: localized_string.screen, localized_string: localized_string, translation:   localized_string.translations.build

# inline_form.html.haml
%td{ colspan: 4 }
  # the form wasn't previously inside a td tag.
  = form_for [app, screen, localized_string, translation], remote: true,  style: "margin-bottom: 0" do |f|