cocoonのcallbackが動かない

rails6でcocoonを使用しています。
jqueryでcocoonのcallbackを使用した処理を実装したいのですがうまく動きません。
github

# _form.html.erb
<%= form_with(model: user, local: true) do |f| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
        <% user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :age %>
    <%= f.number_field :age %>
  </div>

  <div id='nicknames'>
    <%= f.fields_for :nicknames do |nickname| %>
      <%= render 'nickname_fields', f: nickname %>
    <% end %>
    <div class='links'>
      <%= link_to_add_association 'add nickname', f, :nicknames %>
    </div>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

# _ nickname_fields.html.erb
<div class='nested-fields'>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <%= link_to_remove_association "remove nickname", f %>
</div>

cocoon.js
$(function() {
  //consoleは出力できている
  console.log('cocoon');

  $('#nicknames')
    .on('cocoon:before-insert', function() {
      console.log('before_insert');
    })
    .on('cocoon:after-insert', function() {
      console.log('after-insert');
    })
    .on('cocoon:before-remove', function() {
      console.log('before-delete');
    })
    .on('cocoon:after-remove', function() {
      console.log('after-delete');
    })


})

cocoonの基本動作はしっかり動いています。
jsでカスタマイズをしたくてcallbackをしようと思ってます。
動かない原因がわかる方がいましたらご教授ください。