More than 1 year has passed since last update.

JavaScriptのクリックイベントのアクションが実行されない

Posted at 2022-08-21

はじめに

この記事は2022年4月にまとめていた「細かいつまずいたことをメモしておく(4月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

以下のようなJavaScriptをjQueryで書いていました

$('#test').click(function() {
  console.log('クリックされました！');
})

しかし、ID(test)のある属性をクリックしても何も起きませんでした
次にJquery自体が読み込めているのか確認するために、以下を実行することにしました

$(function(){
  alert('jQuery is ready.')
});

するとうまく実行できました

avaScriptのDOMが準備される前に実行されているという根本的なところが抜けていました
Jqueryを実行するには$(document).ready(function(){の中に処理を書く必要があります

$(document).ready(function(){
  $('#test').click(function() {
    console.log('クリックされました！');
  })
}

また、アラートが成功したのはDOM操作が存在しないためでした
初心者なミスをするとは思ってませんでした