Как получить правильное количество элементов после добавления вложенных полей?

Question

Я использую Cocoon gem для создания вложенных объектов в форме в Rails 4. После нажатия "Добавить вложенный элемент", $('. Js_slider'). Length возвращает n-1 вместо n, если вызывается из функции click().

частичное _nested_element_fields.html.slim

 .nested-fields
        = f.input :name
        = f.input :description
        = f.hidden_field :importance, :class => "js_importance_input"
        .js_slider
        = link_to_remove_association "Remove nested", f

просмотреть form.slim.html

= f.simple_fields_for :nested_elements do |f|
  .factors_container
    = render :partial => "nested_fields", :locals => {:f => f}
   .links
      = link_to_add_association "Add Nested", f, :nested_elements, :class => "js_add_nested_elements"

javascript slider.js

$(document).ready(function(){
    $('.add_fields').click(function(){
        console.log($('.js_slider').length);
    });
});

Каков наилучший подход, чтобы дождаться выполнения функции щелчка и затем получить правильное количество элементов.js_slider?

Answer 1

Cocoon предоставляет несколько событий JS, на которые вы можете подписаться:

• cocoon:before-insert: вызывается перед вставкой нового вложенного потомка
• cocoon:after-insert: вызывается после вставки
• cocoon:before-remove: вызывается перед удалением вложенного ребенка
• cocoon:after-remove: вызывается после удаления

Вы, вероятно, хотите cocoon:after-insert:

 $('#surrounding_element').on('cocoon:after-insert', function(e, insertedItem) {
    console.log($('.js_slider').length);
 });

Смотрите раздел readme Callbacks (upon insert and remove of items),