jquery on('click', ()) method doesn't work properly in rails7

Question

I am new to rails7 and I can't make jquery work properly. Below simple code(change element's attribute by radio button value) doesn't work which it worked with Webpack(rails6).

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "jquery";

document.addEventListener("turbo:load", () =>{
    var isRadio = $('.radio-or-write input.radio-item:checked').val()
    var writeContainer = $('.write-container');
    var radioContainer = $('.radio-container');
    // toggle div visible when screen is loaded.
    const toggleWriteOrRadioImmed = (isRadio) => {

     // console.log(isRadio) // this outputs false  string correctly

        if (JSON.parse(isRadio) == false) {
            radioContainer.hide().attr("disabled", true);
        } else {
            writeContainer.hide().attr("disabled", true);
        }
    }
    ///this one does work↓
    toggleWriteOrRadioImmed(isRadio);

    ///////↓this one doesn't work
    //toggle div visible when switching the radio
    $('.radio-or-write input.radio-item').on('click', () => {
        //console.log(isRadio) outputs undefined instead of true or false 
        var isRadio = $(this).val();
        console.log(isRadio) // this outputs undefined instead of true/false string
        if (JSON.parse(isRadio) === false) {
            radioContainer.slideUp(200).attr("disabled", true);
            writeContainer.slideDown(200).attr("disabled", false)
        } else {
            writeContainer.slideUp(200).attr("disabled", true);
            radioContainer.slideDown(200).attr("disabled", false);
        }
    })
})

 <div class="radio-or-write">
   <p><label><%= f.radio_button :radio, false, {class: "radio-item" } %> 記入式</label></p>
   <p><label><%= f.radio_button :radio, true, {class: "radio-item" } %> 選択式 </label></p>
 </div>

I use importmap to use jquery.

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"

Could anyone tell me why this doesn't work or another way to have this work?

jquery on('click', ()) method doesn't work properly in rails7

0 Answers0