jquery事件未使用webpacker和coffeescript触发

Question

[尝试从头开始构建新的Rails 6应用程序以替换Rails 5.2应用程序。尝试将Webpacker与基础站点jquery和coffeescript一起使用]

经过一堆搜索，我已经用webpacker加载了所有内容。在示例使用不同方法的情况下，它看起来非常（也许也是）灵活。

除了jquery事件似乎不会触发或构建监听器之外，其他所有方法（基础都可以进行x网格，标注等，jquery加载，并且我可以记录jquery对象，coffeescript编译）。

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对象测试按钮对单击时无响应。警报或其他控制台消息不会出现。认为我只尝试了.click而没有响应

正如您所知道的，我没有大括号，html标记等（苗条和咖啡），我有很多咖啡脚本，现在真的不想更改。

不是真的很擅长使用Web inspector进行调试（Safari），但是有东西存在，只是不知道如何找到监听器

您是否知道我没有想到事件未加载/触发？

附加信息：

我已经放弃了。 Webpacker似乎对待资产畅通无阻的JavaScript的方式有所不同。几乎我所有的javascript（脚本）都是UJS。 （是否已加载DOM元素，类，行为等），然后如果单击，更改等，则添加一个侦听器来处理它。

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

我已经尝试从方程式中剔除不同的事物。使用DOM事件而不是jQuery。删除基础等，等等。js控制台上没有错误。我什至发现在哪里可以看到什么听众，而我的听众在那里，只是对点击没有响应。可能是因为这只是处于开发模式的新Shell应用程序。

编辑

我发现了问题，但没有解决方法！

我从头开始使用一个新应用，但是一次又增加了我的要求（咖啡，基础站点（取决于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的]

然后我使用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的样板。