How to execute JavaScript after cocoon has loaded a new nested form in Rails?

Question

I'd like to set some fields hidden until a user clicks on a checkbox, then they're supposed to show up and it works fine with the first load like so

$(document).ready(function(){
  $(".m100check").click(function() {
    $(this).parents('.nested-fields').children('.persrecm100').toggle();
    $(this).parents('.nested-fields').children('.bestm100').toggle();   
  });
});

but when I add another nested form this script stops working for the given fields, still only works on the first one that loaded with the page. How can I force it to work after the cocoon has finished adding a new form?

Answer 1

This is probably not the best way to do it, but it worked out for me:

$(document).on('ready page:load', function () {
    function set_masks () {
        $('.t0000').mask('00,00');
        $('.t000000').mask('00:00,00');
        $('.t000').mask('0,00');
    }

    function show_rec () {
        $('.checkbox').click(function () {
            $(this).closest('div.field').find('div.discip').toggle();
        });
    }


    $('#sportists').on('cocoon:after-insert', function() {
        set_masks();
        show_rec();
    });


    set_masks();
    show_rec();


    $(".add_fields").click(function() {
        set_masks();
        show_rec();
    });
});

Answer 2

try

$('#nested_rows').on('cocoon:after-insert', function(e, insertedItem){
     # your code

});

see callbacks in the doc: https://github.com/nathanvda/cocoon