Rails 4 & Cocoon gem - Bei tief verschachtelten Feldern kann der Rückruf nicht ausgelöst werden Klassenname

Question

Ich habe den Cocoon-Edelstein, der gut funktioniert, um verschachtelte Felder in verschiedenen Tiefen hinzuzufügen und zu entfernen. Ich habe auch die Callbacks after-insert und after-remove, die auf der ersten Verschachtelungsebene mit einer ID arbeiten. Ich kann es auf der zweiten Ebene nicht mit dem Klassennamen auslösen, den ich verwende, da es mehrere Sätze dieses verschachtelten Feldsatzes geben wird.

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' 

Vermögenswerte/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 
    ... 
    }); 

    ... 

}); 

Nicht turbolinks verwenden, wenn es ankommt. Überprüfen Sie das Markup, um sicherzustellen, dass die IDs/Klassen korrekt sind. Es scheint, dass etwas Grundlegendes fehlt.

Danke.

Answer 1

Also, ich habe dieses Problem für eine Weile und natürlich die Minute, die ich die Frage posten, habe ich das Problem herausgefunden. Da diese Rückrufe innerhalb von $(document).ready(function() {}) liegen, wird #cars im DOM existieren, so dass seine Rückrufe gebunden werden können. Aber weil .upgrade-option tiefer verschachtelt ist, existiert es in #cars nicht im DOM, bis ein Auto hinzugefügt wurde.

Meine Lösung Nest war der $('.upgrade-options').on('cocoon:before-insert', function() {...}) Rückruf innerhalb des $('#cars').on('cocoon:after-insert', function() {...}) Rückrufs, da einmal ein Auto hinzugefügt wird, wird .upgrade-option dann im DOM existiert, um den Rückruf zu binden.

Vermögenswerte/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 
    ... 
    }); 

    ... 

}); 

Answer 2

Ihre Antwort REVISED ganz korrekt ist.

Da dies jedoch nur Standard-Jquery ist, können Sie dem Ereignishandler auch einen Selektor hinzufügen, in dem Sie ihn einfach einmal schreiben können. So etwas wie:

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