Tomo_mikoki1104
@Tomo_mikoki1104 (Tomoya S)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

[Rails6] jquery導入後に他のjsファイルが動かなくなってしまった。

解決したいこと

Rails6での質問です。
初質問のため、質問フォームとして至らぬ部分があるかとは思いますが、どなたか回答いただければ幸いです。よろしくお願いいたします。

aplicaation.jsファイルにrequire("jquery")の記述をすると、他のJavaScriptファイルが動かなくなってしまういます。jqueryを導入しても他のjsファイルが動作する様にしたいです。

発生している問題・エラー

index.jsファイルがjqueryを導入すると動かなくなってしまう。

該当するソースコード

app/javascript/packs/aplication.js
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("../comment")
require("../meal_comment")
require("../index")
require("../favorites")
config/webpack/enviroment.js
const { environment } = require('@rails/webpacker')

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

module.exports = environment

起動しなくなった該当ファイル

app/javascript/index.js
window.addEventListener('load', function(){

  const pullDownButton = document.getElementById("lists")
  const pullDownParents = document.getElementById("pull_down")

  pullDownButton.addEventListener('click', function() {
    if (pullDownParents.getAttribute("style") == "display:block;") {
      pullDownParents.removeAttribute("style", "display:block;")
    } else {
      pullDownParents.setAttribute("style", "display:block;")
    }
  })
})

自分で試したこと

Gemfileにはgem 'jquery-rails'を記述しbundle installを行いました。

require("jquery")の記述と、config/webpack/enviroment.jsの記述を外すと通常通り起動します。

0

No Answers yet.

Your answer might help someone💌