モーダル上の要素ってクリックできないのでしょうか？

Question

前提

モーダルで表示されるliタグをクリックしたいのですが、クリックイベントが発火しないです。
モーダルの中にslickなどを入れており、その要素などはクリックでスライダーが動いておりますし、
モーダルではなく普通の要素のときはうまく動作しているのを確認しております。

実現したいこと

モーダルの中にある要素をクリックした際イベントを発火したい。

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

クリックイベントが発火しない

該当のソースコード

下記コードは省略しています。

<div class="modal_container modal_close" style="display: block;">
        <div class="modal_body">
            <div class="modal_close close_btn"></div>
            <div class="modal_content gothic">
<ul>
<li> ~ </li>
<li class="hoge"> ~ </li>
<li> ~ </li>
</ul>

モーダルを起動
$('.modal_link').on("click", function() {
        var target = $(this).data('target');
        modal = document.getElementById(target);
        // scrollPosition = $(window).scrollTop();
        // $("body").addClass("fixed").css({ top: -scrollPosition });

        $('.modal_container').fadeIn();
        $(modal).fadeIn();

            // slickの矢印の時
        gallery_slider.on('afterChange', function(slick, currentSlide) {

            // 一度初期化
            $(modal).find(before_li).removeClass(gl_class);
            $(modal).find(slider_txt).removeClass(gl_class);

            var index = currentSlide['currentSlide'];

            $(modal).find(before_li).eq(index).addClass(gl_class);
            $(modal).find(slider_txt).eq(index).addClass(gl_class);
        });

↓ 動かない
        // $('#gallery_before').on("click", function() {
        //     console.log('hoge');
        //     $(this).addClass('show');
        // });
↑ 動いてない

        return false;
    });
↓ 動かない
    $(document).on('click', before_li, function(){
        alert('Button is clicked');
    });
↑ 動かない

↓ 動く
    $('.modal_close').on("click", function() {
        $('.modal_container').fadeOut();
        $('.modal_content > div').fadeOut();
        return false;
    });
↑ 動く

    $( '.modal_body' ).on( 'click', function( e ){
        e.stopPropagation();
    });

試したこと

いろいろ試したのですが解決策が見つかりません

補足情報（FW/ツールのバージョンなど）

Answer 1

jQuery微妙ですね、いまならdialogを使うほうがよいかも

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    modal.showModal();
  });
  document.querySelector('#modal .close').addEventListener('click',()=>{
    modal.close();
  });
  document.querySelector('#modal .hoge').addEventListener('click',()=>{
    alert('hoge');
  });
});
</script>
<input type="button" value="modal open" id="btn">
<dialog id="modal">
<ul>
<li>・・・</li>
<li class="hoge">hoge</li>
<li>・・・</li>
</ul>
<input type="button" value="close" class="close">
</dialog>