javascript中的rails 6表单输入元素更改事件处理程序答案

【问题标题】：rails 6 form input element change event handler in javascriptjavascript中的rails 6表单输入元素更改事件处理程序
【发布时间】：2021-04-16 03:35:42
【问题描述】：

自从使用 webpacker 升级到 rails 6 后，这不起作用我不知道我的语法是 vanilla 还是 jquery 有人可以告诉我吗？我想我需要在我的 html 中添加一个 jquery.min.js 脚本标签不确定

    document.on("turbolinks:load", () => {

        $('#element_id').change(function(e) {
        // do something
        })

    })

【问题讨论】：

标签： javascript ruby-on-rails

【解决方案1】：

你需要先用yarn添加jQuery

$yarn add jquery

然后你需要在 config/webpack/environment.js 中配置你的 jQuery

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

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

module.exports = environment

创建您的 jQuery 代码并将 .js 文件放入 app/javascript/packs 并在 app/javascript/packs/application.js 中注册/导入您的代码

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "packs/sample1" // this will be sample1.js file
import "packs/sample2"
import "packs/styles.scss"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

应该可以了，祝你编码好运，享受 Rails！

【讨论】：

【解决方案2】：

可能是一个小错误。我想你错过了括号。

$(document).on("turbolinks:load", () => {

    $('#element_id').change(function(e) {
      // do something
    })

})

【讨论】：