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

実現したいこと

下の書き方で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

Lesson11Modal

※補足　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;
}

---

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