События jquery не запускаются с использованием webpacker и coffeescript

Попытка создать новое приложение rails 6 с нуля, чтобы заменить приложение rails 5.2. Попытка использовать webpacker с jquery и coffeescript на сайте Foundation

После кучи поисков я все загрузил с помощью webpacker. Это кажется очень (может быть, слишком) гибким в том, что в примерах используются разные подходы.

Все работает (фундамент делает x-сетку, выноски и т. Д., Загружает jquery, и я могу регистрировать объекты jquery, компилируется coffeescript), за исключением событий jquery, похоже, не запускает или не создает слушателя.

приложение / javascript / pack / application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import "foundation-sites"
require("../src/application")
require("../src/coffee/application.coffee")


$(document).on('turbolinks:load', function() {
  $(document).foundation()
});

приложение / javascript / src / application.scss

@import './foundation/foundation.scss';

конфигурация / webpack / environment.js

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

environment.loaders.prepend('coffee', coffee)
module.exports = environment

корневая тестовая страница index.slim

.grid-container
  .grid-x.grid-margin-x
    .small-4.cell
      h1 Home#index
      p Find me in app/views/home/index.html.slim
    .small-4.cell
      p and something over here?
    .small-4.cell
      p and more over here?
  .callout.alert
    | and maybe an alert

  .callout.notice

    button#test_button.button I be a button

приложение / JavaScript / SRC / кофе / application.coffee

import './hello_coffee.coffee';
import './test_button.coffee';

приложение / JavaScript / SRC / кофе / test_button.coffee

console.log "looking for a button"

jQuery ->
  console.log $('#test_button')
  $('#test_button').on 'click', (e) ->

    alert "I see you be a button"
    console.log "should only see if test button clicked"

Загрузится страница корневого тестового индекса. Он регистрирует "поиск кнопки" перед функцией jQuery. Он регистрирует объект jquery #test_button. Тестовая кнопка не реагирует на .on щелчок. Предупреждение или другие сообщения консоли не появляются. Думаю, я пробовал просто .click и без ответа

Как вы понимаете, мне не нравятся фигурные скобки, HTML-теги и т. Д. (Slim и coffee). У меня много coffeescript, и я действительно не хочу что-то менять.

Не очень хорошо использовать веб-инспектор для отладки (сафари), но кое-что есть, просто не могу или не знаю, как найти слушателей

Любая идея, что мне не хватает, что события не загружаются / не запускаются?

Дополнительная информация:

Я сдался. Webpacker, похоже, обрабатывает свободный JavaScript иначе, чем конвейер ресурсов. Почти весь мой javascript (coffescript) - это UJS. (есть ли элемент DOM, класс, поведение и т. д.), затем добавьте слушателя, который будет обрабатывать его, если он был нажат, изменен и т. д.

Я что-то делаю неправильно и потратил больше времени, пытаясь заменить то, что работает, на то, что должно было быть лучше. Мне придется подождать, пока еще больше людей не запутаются, и кто-то другой укажет на разницу. Webpacker больше подходит для одностраничных JS-приложений, и я этим не занимаюсь.

Я пробовал убрать из уравнения разные вещи. Использовал события DOM вместо jQuery. удалить фундамент и т. д. и т. д. Ошибок на консоли js нет. Я даже нашел, где посмотреть, какие слушатели работают, а мой есть, просто не реагирует на щелчок. Может быть, потому что это просто новое приложение-оболочка в режиме разработки.

РЕДАКТИРОВАТЬ

Я нашел проблему, но решения нет!

Я начал с нуля с новым приложением, но добавлял свои требования (coffeescript, базовые сайты (зависит от jQuery) по одному шагу за раз.

Я создал домашнюю страницу с тремя кнопками щелчка. По одному на каждый чистый javascript, coffeescript и jquery. Есть еще одна кнопка для перезагрузки страницы с помощью rails.ujs

.grid-container
  .grid-x.grid-margin-x
    .small-4.cell
      p Left column: Find me in app/views/home/index.html.slim
    .small-4.cell
      p Middle column: and something over here?
    .small-4.cell
      p Right column: and and more over here?
  .callout.alert
    p#jsbutton.button Javascript Button
  .callout.warning
    p#csbutton.button Coffeescript Button
  .callout.success#jqbutton
    p#jqbutton.button Jquery Button

  p= link_to "Reload",root_path, data: { confirm: 'Reload: Are you sure?' }, class: :button

Затем я добавил обработчики по одному в пакет для обработки каждой кнопки. Обработчик кликов javascript работал из коробки (до добавления coffeescript и jquery). Добавлен загрузчик coffeescript и кнопка заработала. Добавлен jquery, и все кнопки заработали. Домашний тонкий файл был настроен для фундаментной сетки, но фундамент не был загружен, поэтому это были просто div и p

Затем я установил сайты-основы с помощью пряжи и настроил файл pack / application.js, как показано ниже:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("./js/jsbutton.js")
require("./coffee/hello_coffee.coffee")
require("./coffee/csbutton.coffee")
require("./jquery/jqbutton.coffee")

import "foundation-sites"
import './scss/foundation.scss';

$(document).on('turbolinks:load', function() {
  $(document).foundation()
})

Фундаментная сетка предстала во всей красе, но ни одна из кнопок не реагировала на нажатия. У всех есть обработчики событий щелчка. Кнопка перезагрузки (rails.js) ответила подтверждающим сообщением.

Я решил пойти на сайт фонда и поискать помощь, проблема в том, что сайты фонда могут быть умирает !!!

Есть надежда, что все вернется на круги своя, но пока я сомневаюсь, что смогу получить какую-либо помощь.