Q&A
実現したいこと
下の書き方でBセレクタをクリックした際に反応しない理由が知りたい。
$function(){
$(Aセレクタ).click(function(){Bセレクタを含む要素をHTMLにpreppedで追加};
$(Bセレクタ).click(function(){略};
}
※質問とは関係ありませんが、モータルウィンドウの実装になります。
前提
ここに質問の内容を詳しく書いてください。
Jqueryにおいて、
ある書き方が機能しない理由がわからない。
方法1は機能するが、方法２の場合、
$("#bg").click(function(){
以降の部分が機能しない理由がわからない。
発生している問題・エラーメッセージ
エラーメッセージなし。
該当のソースコード
JQYERY
〇方法1（機能する）
$(function(){
$("ul li a").click(function(){
$("body").prepend("<div id='bg'></div><div id='photo'><img src=''></div>");
$("#bg,#photo").hide();
$("#photo img").attr("src",$(this).attr("href"));
$("#bg,#photo").fadeIn(200);
$("#bg").click(function(){
$(this).fadeOut(200,function(){
$(this).remove();
});
$("#photo").fadeOut(200,function(){
$(this).remove();
});
});
return false;
});
});
〇方法2（機能しない）
$(function(){
$("ul li a").click(function(){
$("body").prepend("<div id='bg'></div><div id='photo'><img src=''></div>");
$("#bg,#photo").hide();
$("#photo img").attr("src",$(this).attr("href"));
$("#bg,#photo").fadeIn(200);
return false;
});
$("#bg").click(function(){
$(this).fadeOut(200,function(){
$(this).remove();
});
$("#photo").fadeOut(200,function(){
$(this).remove();
});
return false;
});
});
※補足 HTML
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Lesson11</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/script.js"></script> </head> <body> <h1>Modal</h1> <main id="wrapper"> <ul> <li><a href="img/img1.jpg"><img src="img/thumb1.jpg" width="100" height="100" alt="Photo1"></a></li> <li><a href="img/img2.jpg"><img src="img/thumb2.jpg" width="100" height="100" alt="Photo2"></a></li> <li><a href="img/img3.jpg"><img src="img/thumb3.jpg" width="100" height="100" alt="Photo3"></a></li> </ul> </main> </body> </html>※補足 CSS
@charset "UTF-8";
body{
font-family:Arial, sans-serif;
-webkit-font-smoothing:antialiased;
background:#CE563F;
}
main{
width:640px;
margin:0 auto;
display:block;
}
h1{
margin:130px 0 50px;
color:#F9B972;
font-size:5em;
font-weight:bold;
text-align:center;
}
ul{
width:400px;
margin:0 auto;
}
li{
float:left;
list-style-type:none;
margin-right:50px;
}
li:last-child{
margin-right:0;
}
#bg{
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(0, 0, 0, .4);
}
#photo{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:640px;
height:420px;
}
何卒よろしくお願いします。
回答1件
0
ベストアンサー
下の書き方でBセレクタをクリックした際に反応しない理由が知りたい。
$(Bセレクタ) は、それを実行する時点でBセレクタにマッチする要素の集合です。後から足される要素のことは知りようがありません。
まだ存在しない要素のイベント処理を書きたい場合は、
js
1$(document).on('click', Bセレクタ, function() { ... });
のように書きます。
投稿2023/05/30 09:39
総合スコア19707
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/30 10:03