javascript - クラスではなくIDに対して発生するJavascript onclickイベント

Question

私はJavascriptにかなり慣れていないので、拡大された画像をクリックすると再び縮小する「クリックで拡大」のような効果を得ようとしています。拡大は、サムネイルを元の画像に置き換えることによって行われます。また、後でデータベースの画像を使用してスライドショーを取得したいと考えています。

そのために、クラスによって拡大が可能であることを示す id を置き換えるテストを作成し、使用している URL を追跡できるようにグローバル変数も使用します。これがベストプラクティスかどうかはわかりませんが、より良い解決策は見つかりませんでした。

最初の部分は正常に動作し、私のイメージは問題なく変更され、「アラート」ステートメントに従って値も更新されます。ただし、2 番目の部分、クラスのある部分はトリガーされません。

私は何を間違っていますか（非常に多くの悪い習慣を除いて）？

クラスを変更する代わりに id を直接変更すると (.image_enlarged を #image_enlarged に置き換えるなど)、最初の関数 (id を持つ関数) を呼び出すように見えますが、更新された id が出力され、かなり混乱します。

var old_url = "";

$(function(){

   $('#imageid').on('click', function ()
        {       
        if($(this).attr('class')!='image_enlarged'){
            old_url = $(this).attr('src');
            var new_url =  removeURLPart($(this).attr('src'));
            $(this).attr('src',new_url); //image does enlarge
            $(this).attr('class',"image_enlarged");
            $(this).attr('id',"");
            alert($(this).attr('class')); //returns updated class
            }
        });

   $('.image_enlarged').on('click', function (){
       alert(1); //never triggered
       $(this).attr('src',old_url);
       $(this).attr('class',"");
       $(this).attr('id',"imageid");
   });
});

function removeURLPart(e){
   var tmp = e;
       var tmp1 = tmp.replace('thumbnails/thumbnails_small/','');
       var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/',''); 
       var tmp3 = tmp2.replace('thumbnails/thumbnails_large/','');

   return tmp3;
} 

HTMLに関しては、それは本当に簡単です：

<figure>
   <img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" />
   <figcaption>Test + Price thing</figcaption>
</figure>

<script>
   document.write('<script src="js/jquery-1.11.1.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script>