jquery 事件未使用 webpacker 和 Coffeescript 触发

Question

尝试从头开始构建新的 Rails 6 应用程序来替换 Rails 5.2 应用程序。尝试将 webpacker 与基础站点 jquery 和 Coffeescript 结合使用

经过一番搜索，我已经用 webpacker 加载了所有内容。它看起来非常(也许太)灵活，因为示例使用了不同的方法。

一切正常(基础执行 x-grid、标注等，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()
});

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

根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 对象 测试按钮不响应单击。警报或其他控制台消息不会出现。 我想我只是尝试了一次点击，但没有任何反应

正如你所知，我不喜欢大括号、html 标签等(slim 和咖啡)，我有很多 CoffeeScript ，现在真的不想改变。

不太擅长使用 Web Inspector 进行调试(Safari)，但东西就在那里，只是不能或不知道如何找到监听器

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

其他信息:

我已经放弃了。 Webpacker 对待无障碍 javascript 的方式似乎与 Assets 管道不同。我几乎所有的 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 点击处理程序开箱即用(在添加 Coffeescript 和 jquery 之前)。添加了 CoffeeScript 加载器和按钮工作。添加了jquery并且所有按钮都工作了。 home slim 文件是为基础网格设置的，但是基础没有加载，所以它只是 div 和 p 的

然后我使用yarn安装了foundation-sites并设置了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 的样板。