Question

我让Cocoon gem在添加和删除不同深度的嵌套字段时运行良好。我还使用id在第一级嵌套中使用after-insert和after-remove回调。我无法使用我正在使用的类名称在第二级触发它，因为这将有多套此嵌套字段集。

视图/ 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'
...

视图/ 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'
  ...

视图/ 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'

资产/ Javascript角/ 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正确。似乎有一些我缺少的基本内容。

感谢。

Answer 1

你的回答是完全正确的。

但是因为这只是标准的jquery，你还可以在事件处理程序中添加一个选择器，你可以在其中编写一次。如下所示：

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

Answer 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
    ...
  });

  ...

});

Rails 4＆amp; Cocoon gem - 无法在深层嵌套的字段上进行回调。班级名称

2 个答案: