Cocoon 回调没有在 Rails6 上触发答案

【问题标题】：Cocoon callbacks aren't firing on Rails6Cocoon 回调没有在 Rails6 上触发
【发布时间】：2021-02-19 12:32:44
【问题描述】：

我的问题与https://github.com/nathanvda/cocoon/issues/399中描述的类似。

添加和删除嵌套字段有效，但不会触发回调。

application.js：

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

// Bootstrap
require("bootstrap")

// Toastr
global.toastr = require("toastr")

// Cocoon
require("@nathanvda/cocoon")

import "../stylesheets/application"
require("packs/ingredient")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

ingerdient.js

$(document).on('ready page:load turbolinks:load', function() {
    $("a.add_fields")
      .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 remove');
      })
      .on("cocoon:after-remove", function () {
          console.log('after remove');
      });

   $("a.add_fields").on('click', function(){
     console.log('looks like clicking works...');
   });
});

控制台输出：

事件监听器：

jquery.js:4487:

也许问题是双重的jQuery，但我是新手，我不知道如何解决。

谢谢。

【问题讨论】：

您在链接上注册回调，但在容器对象上注册它们通常更安全。其次：如果您担心“双 jquery”，您可能会同时包含一个 application.js 和一个通过 webpacker？
在容器对象中使用回调是可行的。谢谢

标签： ruby-on-rails cocoon-gem

【解决方案1】：

OP在链接上注册了回调，但建议在容器对象上注册。

引用cocoon documentation:

请注意，要使回调起作用，必须有一个可以将回调绑定到的周围容器。

【讨论】：