質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

234閲覧

Jquery のイベントの開始について

kakiage-man

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/30 09:26

実現したいこと

下の書き方でBセレクタをクリックした際に反応しない理由が知りたい。
$function(){
$(Aセレクタ).click(function(){Bセレクタを含む要素をHTMLにpreppedで追加};
$(Bセレクタ).click(function(){略};
}

※質問とは関係ありませんが、モータルウィンドウの実装になります。

前提

ここに質問の内容を詳しく書いてください。

Jqueryにおいて、
ある書き方が機能しない理由がわからない。

方法1は機能するが、方法2の場合、
$("#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;
}


何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下の書き方でBセレクタをクリックした際に反応しない理由が知りたい。

$(Bセレクタ) は、それを実行する時点でBセレクタにマッチする要素の集合です。後から足される要素のことは知りようがありません。

まだ存在しない要素のイベント処理を書きたい場合は、

js

1$(document).on('click', Bセレクタ, function() { ... });

のように書きます。

投稿2023/05/30 09:39

int32_t

総合スコア21190

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kakiage-man

2023/05/30 10:03

$(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; }); $(document).on("click","#bg",function(){ $(this).fadeOut(200,function(){ $(this).remove(); }); $("#photo").fadeOut(200,function(){ $(this).remove(); }); }); }); 上記にすることで、実行できました!ありがとうござます。 $(function(){ が$(document).ready(function{ の略であり、 document が読み込まれた際にマッチするものがないセレクタを指定することができないため、 HTML読み込み→jsの通常部分を読み込み→HTML変更→変更されたHTMLをクリックした際にjs読み込みと、タイミングをずらすことで実行できると理解しました。ありがとうござます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問