Rails 4 & Cocoon gem - Невозможно вызвать обратный вызов для запуска имени класса глубоко вложенных полей

Question

У меня есть камень Cocoon, хорошо работающий для добавления и удаления вложенных полей на разных глубинах. У меня также есть 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'

активы / 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
    ...
  });

  ...

});

Не использовать турболинки, если это имеет значение. Дважды проверил разметку, чтобы убедиться, что идентификаторы / классы верны. Кажется, мне чего-то не хватает.

Благодарю.

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

  ...

});