【Leaflet】ポップアップ内のHTMLからclass要素を取得したい

前提・実現したいこと

地図上のポップアップに表示されたHTML要素（divなりpなり）をクリックすると、別の詳細説明欄が表示される。という機能を実装したいです。

イメージ的には、Googleマップとほぼ同じです。
※Gmapでは場所をクリックしただけで詳細説明欄が表示

なお、別の詳細説明欄を表示するという機能はleafletには無い（と思う）ので、独自に実装しました。

発生している問題・エラーメッセージ

Leafletのポップアップに設定したHTMLのDiv要素をクリックするタイミングで、独自のJavascriptコードを発動させたいのですが、上手くいきません。
おそらく、クリック判定が行われていません。

該当のソースコード

HTML
1<div class="p-i-u-f-single-common p-i-u-f-frame-1">
2   <!--詳細説明欄用のDivに id="shop-No1"を持たせる-->
3   <div class="shop-c1-common" id="shop-No1">
4      <p>No1.コンテント1</p>
5   </div>
6 </div>

javascript
1//クリック判別用の class と、id生成用の data-id を持たせる
2var popup_contents1 = "<div class='popup-contents' data-id='No1'><h2>盛岡駅</h2><img src='../image/1.jpg' alt=''><p>詳しく見る</p></div>";
3  var popup1 = L.popup().setContent(popup_contents1);
4  L.marker([39.700896,141.137301], {icon: greenIcon}).bindPopup(popup1).bindTooltip("盛岡駅").addTo(map);

これで一応、マーカー、ポップアップ（文字・画像）は表示される。
↑そして、ここで設定した class と data-id を、以下のコードで取得して利用したい

javascript
1//ポップアップの内容（class）をクリックしたときの関数
2$('.popup-contents').click(function(){
3    //data-idを取得したい
4    var $popup_eventID = $(this).data('id');
5   
6    //以後動作確認済み
7    //#shop-No1 というIDを作る
8    var $active_ID = $('#shop-'+$popup_eventID);
9
10    //変数群
11    var $frame1 = $('.p-i-u-f-frame-1');
12    var $content1 = $('.shop-c1-common');
13
14    //詳細説明欄の表示設定
15    if($frame1.hasClass('active-shop')){
16      $content1.css('display','none');
17      $active_ID.css('display','block');
18    }else{
19      $frame1.addClass('active-shop');
20      $active_ID.css('display','block');
21    }
22
23  });