使用 webpacker 和 coffeescript 未触发 jquery 事件

Question

尝试从头开始构建一个新的 rails 6 应用程序来替换 rails 5.2 应用程序。尝试将 webpacker 与基础站点 jquery 和咖啡脚本一起使用

经过大量搜索，我已经用 webpacker 加载了所有内容。它似乎非常（也许太）灵活，因为示例使用了不同的方法。

一切正常（基础做 x-grid、标注等、jquery 加载，我可以记录 jquery 对象、coffeescript 编译），除了 jquery 事件似乎没有触发或构建监听器。

app/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()
});

app/javascript/src/application.scss

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

config/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

root 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

app/javascript/src/coffee/application.coffee

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

app/javascript/src/coffee/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 函数之前记录“寻找按钮” 它记录#test_button jquery 对象 测试按钮不响应.on click。不会出现警报或其他控制台消息。 我想我只是尝试了一个 .click 并没有响应

如你所知，我不喜欢花括号、html 标签等（苗条和咖啡）我有很多咖啡脚本，现在真的不想改变。

不太擅长使用网络检查器进行调试（safari），但东西在那里，就是不能或不知道如何找到监听器

知道我错过了什么事件没有加载/触发吗？

附加信息：

我已经放弃了。 Webpacker 似乎对待通畅的 javascript 与资产管道不同。几乎我所有的 javascript (coffescript) 都是 UJS。 （是否有 DOM 元素、类、行为等）加载，然后添加一个监听器来处理它，如果它被单击、更改等。

我没有做正确的事情，我浪费了更多的时间来尝试用应该更好的东西来替换有效的东西。我将不得不等到更多人感到困惑并且其他人指出不同之处。 Webpacker 更适用于单页 JS 应用程序，我不这样做。

我尝试过从等式中剔除不同的东西。使用 DOM 事件而不是 jQuery。删除基础等。js控制台上没有错误。我什至找到了在哪里可以看到哪些监听器正在运行，而我的监听器就在那里，它只是不响应点击。也许是因为这只是一个处于开发模式的新 shell 应用程序。

编辑

我找到了问题，但没有解决办法！

我从头开始使用一个新应用程序，但一次添加了我的需求（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 点击处理程序开箱即用（在添加咖啡脚本和 jquery 之前）。添加了咖啡脚本加载器和按钮工作。添加了 jquery 并且所有按钮都有效。 home slim 文件是为基础网格设置的，但是基础没有加载，所以它只是 div 和 p 的

然后我使用 yarn 安装了基础站点并设置了 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) 确实响应了一条确认消息。

我想去基金会网站寻求帮助，问题是基金会网站可能是dying!!!

希望它会重回正轨，但现在我怀疑我能得到任何帮助。

Answer 1

在Foundation 和Webpacker 的帮助下，找到了解决方案。这不是我对 webpacker 的配置或基础的使用，而是一个简单的 scss 设置，将 .callout 类的 z-index 设置为 -1。这导致点击事件永远不会到达按钮。几年前我添加的东西，以防止下拉菜单落后于标注，

至少我有一个关于如何使用 webpacker 在 Rails 6 应用程序中使用 Foundation 的样板。