问题
Trying to build a new rails 6 application from scratch to replace a rails 5.2 application. Trying to use webpacker with foundation-site jquery and coffeescript
After a bunch of searching I've got everything loaded with webpacker. It appears to be very (maybe too) flexible in that examples use different approaches.
Everything works (foundation does x-grid, callouts etc, jquery loads and I can log jquery objects, coffeescript compiles) except jquery events don't seem to fire or build a listener.
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 test page
.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"
The root test index page loads. It logs "looking for a button" before the jQuery function It logs the #test_button jquery object The test button does not respond to .on click. The alert or other console messages do not appear. Think I tried just a .click and no response
As you can tell, I'm not into curly brackets, html tags etc (slim and coffee) I have a lot of coffeescript and really don't want to change at this point.
Not real good at using web inspector to debug (safari) but stuff is there, just can't or don't know how to find listeners
Any idea what I'm missing that events are not loaded/firing?
Additional info:
I've given up. Webpacker seem to treat unobstructed javascript differently than the asset pipeline. Almost all of my javascript (coffescript) is UJS. (is there a DOM element, class, behavior, etc) loaded, then add a listener to deal with it if it's clicked, changed, etc.
I'm not doing something right and I wasted more time trying to replace something that works with something that was supposed to be better. I'll have to wait until more people are confused and someone else point out what is different. Webpacker is more for single page JS applications and I am not doing that.
I've tried taking different things out of the equation. Used DOM events instead of jQuery. remove foundation, etc, etc. No errors on js console. I even found where to see what listener are up and mine is there, it just does not respond to a click. Maybe because this is just a new shell application in development mode.
EDIT
I found the problem, but no solution!
I started from scratch with a new app, but added my requirements (coffeescript, foundation-sites (depends on jQuery) one step at a time.
I created the home page with three 'click' buttons. One each pure javascript, coffeescript and jquery. There is another button to reload page using 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
I then added handlers one at a time to the pack to handle each button. The javascript click handler worked out of the box (before adding coffeescript and jquery). Added coffeescript loader and button worked. Added jquery and the all buttons worked. The home slim file was setup for foundation grid, but foundation was not loaded so it was just div's and p's
I then installed foundation-sites using yarn and setup the pack/application.js file as below:
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()
})
The foundation grid came up in all its glory, but none of the buttons responded to clicks. They all have click event handlers. The reload button (rails.js) did respond with a confirm message.
Figured I'd go to the foundation site and look for help, the problem is that foundation-sites may be dying!!!
There is hope that it will get back on track, but for now I doubt I could get any help.
回答1:
With help from Foundation and Webpacker on the problem, a solution was found. It was not my configuration for webpacker or the use of foundation, but a simples scss setting that set the z-index of a .callout class to -1. That caused the click event to never reach the button. Something I added years ago to prevent a pulldown from going behind a callout,
At least I have a boiler plate on how to use Foundation in a Rails 6 application using webpacker.
来源：https://stackoverflow.com/questions/58148550/jquery-events-not-firing-using-webpacker-and-coffeescript