Edited at

[雑記] HerokuでjQueryのreadyイベントが動かなかった時にやったこと

More than 1 year has passed since last update.

チェックボックスのクリックをトリガーとするreadyイベントを作りたかったんです。

そこで、こんなreadyイベント関数を書きました。

// readyイベント関数

$(window).on("load", function(){

// checkboxイベントの設定
$('input[type="checkbox"]').change(function() {
//
// ここにはイベントの内容を書きます
//
});

});

ローカルでの動作確認ができたので、公開のためにこのコードを含めたファイルをHerokuにデプロイしたんです。

しかし、readyイベントだけ動作せず。

即時関数としては機能したのですが、readyイベント関数としては機能しませんでした。

一体なぜ...。

調査をすること××時間。

こんなブログ記事に出会いました。

▶︎ jQueryが動かない時に確認する9項目

そして、「2)処理のタイミングを確認」を参考に、以下の部分を...

// checkboxイベントの設定

$('input[type="checkbox"]').change(function() {

こう変えました。

// checkboxイベントの設定

$(document).on('change', 'input[type="checkbox"]', function() {

これで動きました...。

readyイベント関数を作る際には、on()を使うのが有効らしいです。


付録:実際に作ったコード


checkboxEvent.js

// readyイベント関数

$(window).on("load", function(){

// checkboxイベントの設定
$(document).on('change', 'input[type="checkbox"]', function() {
var selectedCheckbox = document.getElementById($(this).val());
if ($(this).prop('checked')) {
selectedCheckbox.style.opacity = 1;
} else {
selectedCheckbox.style.opacity = 0;
}
});

});