前提
モーダルで表示されるliタグをクリックしたいのですが、クリックイベントが発火しないです。
モーダルの中にslickなどを入れており、その要素などはクリックでスライダーが動いておりますし、
モーダルではなく普通の要素のときはうまく動作しているのを確認しております。
実現したいこと
モーダルの中にある要素をクリックした際イベントを発火したい。
発生している問題・エラーメッセージ
クリックイベントが発火しない
該当のソースコード
下記コードは省略しています。
html
1<div class="modal_container modal_close" style="display: block;"> 2 <div class="modal_body"> 3 <div class="modal_close close_btn"></div> 4 <div class="modal_content gothic"> 5<ul> 6<li> ~ </li> 7<li class="hoge"> ~ </li> 8<li> ~ </li> 9</ul> 10
jquery
1モーダルを起動 2$('.modal_link').on("click", function() { 3 var target = $(this).data('target'); 4 modal = document.getElementById(target); 5 // scrollPosition = $(window).scrollTop(); 6 // $("body").addClass("fixed").css({ top: -scrollPosition }); 7 8 $('.modal_container').fadeIn(); 9 $(modal).fadeIn(); 10 11 // slickの矢印の時 12 gallery_slider.on('afterChange', function(slick, currentSlide) { 13 14 // 一度初期化 15 $(modal).find(before_li).removeClass(gl_class); 16 $(modal).find(slider_txt).removeClass(gl_class); 17 18 var index = currentSlide['currentSlide']; 19 20 $(modal).find(before_li).eq(index).addClass(gl_class); 21 $(modal).find(slider_txt).eq(index).addClass(gl_class); 22 }); 23 24↓ 動かない 25 // $('#gallery_before').on("click", function() { 26 // console.log('hoge'); 27 // $(this).addClass('show'); 28 // }); 29↑ 動いてない 30 31 return false; 32 }); 33↓ 動かない 34 $(document).on('click', before_li, function(){ 35 alert('Button is clicked'); 36 }); 37↑ 動かない 38 39↓ 動く 40 $('.modal_close').on("click", function() { 41 $('.modal_container').fadeOut(); 42 $('.modal_content > div').fadeOut(); 43 return false; 44 }); 45↑ 動く 46 47 $( '.modal_body' ).on( 'click', function( e ){ 48 e.stopPropagation(); 49 });
試したこと
いろいろ試したのですが解決策が見つかりません
補足情報(FW/ツールのバージョンなど)

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。