javascript中的Rails6表单输入元素更改事件处理程序

Question

自从用webpacker升级到Rails6后，这就不起作用了，我不知道我的语法是普通的还是jquery，有人能告诉我吗，我想我需要给我的html添加一个jquery.min.js脚本标签，我不确定

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

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

    })

Answer 1

您需要先添加带有yarn的jQuery

$yarn add jquery

然后需要在jQuery /webpack/environment.js ment.js中配置您的环境

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！

Answer 2

可能是个小错误。我想你漏掉了括号。

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

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

})