添加嵌套字段后如何获得正确数量的元素？

Question

我正在使用 Cocoon gem 在 Rails 4 中的表单中创建嵌套对象。单击 "Add Nested Element" 后，$('.js_slider').length returns 如果在 click() 函数内部调用，则 n-1 而不是 n。

部分_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);
 });

请参阅自述文件部分 Callbacks (upon insert and remove of items)。

添加嵌套字段后如何获得正确数量的元素？

How to get correct number of elements after adding nested fields?

jquery

ruby-on-rails

cocoon-gem