jQueryでidが認識されなかったことのメモ
■ボタンでid追加した場合に認識されなかった。
javascriptを少しいじっていて、画面からボタンを押した際に、画面上にレイヤー表示させ、そのレイヤーをクリックすると消えるといったことをやりたいけど、クリックして消える部分がうまくいかなかった。以前、javascriptで作ったカレンダーのコードをベースにしているので、なぜ動かないか調べた内容のメモ。
サンプルのHTMLファイルは下のもの。
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<link href="sample2Cs.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#glayLayer").click(function(){
$("#glayLayer").hide()
window.alert("コードが来ているかのチェック");
})
});
function setLayer(dir) {
$("body").append("<div id='glayLayer'></div>");
$("#glayLayer").show();
}
</script>
</head>
<body>
<button text="BUTTON" id="mark01" onclick="setLayer(id)">Display Layer</button>
</body>
</html>HTMLのボタンをセットして、クリックするとsetLayer(id)関数が動き、レイヤー（glayLayer）を追加、表示する。次のsample2Cs.cssで、glayLayerのプロパティを決める。
#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:#7BAEB5;
filter:alpha(opacity=75);
opacity: 0.75;
}これをChromeで実行して、ボタンをクリックすると下のような画面になる。画面一面にレイヤーが張られた状態。ChromeのディベロッパーツールからHTMLを見ると、glayLayerが追加されていることが分かる。
ここから、レイヤーをクリックすると、上のコードで$("#glayLayer").click(function() 以下が起動して、消えることを予想していたけど、消えない（もちろんalertも出ない）。
以前のカレンダーのコードといろいろ見比べてみたら、どうやらレイヤーのタグの追加タイミングが違っていたよう。下のように、<div>タグの追加をjQueryの関数部分（$(function ()以下）に持っていったら予想通りの動きになった。
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<link href="sample2Cs.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("body").append("<div id='glayLayer'></div>");
$("#glayLayer").click(function(){
$("#glayLayer").hide()
window.alert("コードが来ているかのチェック");
})
});
function setLayer(dir) {
$("#glayLayer").show();
}
</script>
</head>
<body>
<button text="BUTTON" id="mark01" onclick="setLayer(id)">Display Layer</button>
</body>
</html>このHTMLファイルを実行すると、ブラウザが起動した直後からglayLayerのタグ自体は入っている（表示はされていないけど）。これが重要のよう。
ボタンをクリックしてレイヤーを追加、表示しても、HTMLのコードには、対象のidが入っているので、なぜjQueryでの関数が認識されないのか少しはまった話。
