Rails 4 & Cocoon gem - 无法在深度嵌套字段的类名上触发回调答案

【问题标题】：Rails 4 & Cocoon gem - Can't get callback to fire on deeply nested fields' class nameRails 4 & Cocoon gem - 无法在深度嵌套字段的类名上触发回调
【发布时间】：2016-03-23 16:14:16
【问题描述】：

我的 Cocoon gem 可以很好地添加和删除不同深度的嵌套字段。我还有after-insert 和after-remove 回调在使用id 的第一级嵌套中工作。我无法使用我正在使用的类名在第二级触发它，因为会有多组此嵌套字段集。

views/car_buyers/_form.html.haml

...
#cars
  = f.simple_fields_for :cars do |c|
    = render 'car_fields', f: c
  .link-add
    = link_to_add_association '  + Add a Car', f, :cars, partial: 'car_fields'
...

views/car_buyers/_car_fields.html.haml

.nested-fields.car
  ...
  .upgrade-options
    = f.simple_fields_for :upgrade_options, do |uo|
      = render 'upgrade_option_fields', f: uo

    .link-add
      = link_to_add_association '  + Add an Upgrade Option', f, :upgrade_options, partial: 'upgrade_option_fields'
  ...

views/car_buyers/_upgrade_option_fields.html.haml

.nested-fields.upgrade-option
  = f.input :upgrade_option_type,  label:         'Upgrade Option',
                                   collection:    @upgrade_options_list,
                                   include_blank: 'Select...',
                                   input_html:   { class: 'upgrade-option-type-select input-upgrade-option' },
                                   error:         'Upgrade Option selection required.'

  = f.input :upgrade_option_value, label:         'Upgrade Option Value',
                                   collection:    @upgrade_option_values_list,
                                   include_blank: 'Select...',
                                   input_html:   { class: 'upgrade-option-value-select input-upgrade-option' },
                                   error:         'Upgrade Option Value selection required.'

  .link-remove
    = link_to_remove_association icon('remove'), f, class: 'upgrade-option-remove-link remove-link'

assets/javascripts/car_buyers.js

$(document).ready(function() {

  ...

  $('#cars').on('cocoon:after-insert', function() {
    // this is working
    ...
  }).on('cocoon:after-remove', function() {
    // this is also working
    ...
  });

  ...

  $('.upgrade-options').on('cocoon:before-insert', function() {
    // this is NOT working
    ...
  });

  ...

});

不使用 turbolinks，如果这很重要的话。仔细检查标记以确保 id/classes 是正确的。看来我缺少一些基本的东西。

谢谢。

【问题讨论】：

标签： jquery ruby-on-rails-4 callback cocoon-gem

【解决方案1】：

你的答案完全正确。

但是由于这只是标准的 jquery，您还可以在事件处理程序中添加一个选择器，您可以在其中编写一次。所以像：

$('#cars').on('cocoon:before-insert', '.upgrade-options', function() { ...

【讨论】：

【解决方案2】：

所以，我在这个问题上已经有一段时间了，当然，在我发布问题的那一刻，我就发现了这个问题。由于这些回调位于$(document).ready(function() {}) 中，所以#cars 将存在于DOM 中，因此可以绑定其回调。但因为.upgrade-option 嵌套更深，在#cars 中，它在添加汽车之前并不存在于DOM 中。

我的解决方案是将 $('.upgrade-options').on('cocoon:before-insert', function() {...}) 回调嵌套在 $('#cars').on('cocoon:after-insert', function() {...}) 回调中，因为一旦添加了汽车，.upgrade-option 将存在于 DOM 中以绑定回调。

assets/javascripts/car_buyers.js - 修订

$(document).ready(function() {

  ...

  $('#cars').on('cocoon:after-insert', function() {
    // this is working
    ...
    $('.upgrade-options').on('cocoon:before-insert', function() {
      // this is NOW working
      ...
    });
  }).on('cocoon:after-remove', function() {
    // this is also working
    ...
  });

  ...

});

【讨论】：