OnClick doesn't get triggered on reloadig the respective DIV using JQuery get()

Question

I m trying to reload a particular div on a button click using JQuery $.get(), which works perfectly fine. Upon reloading the said div, the Jquery click functions for the div elements don't respond.

Here's the sample code for reference :

Main Page:

<div id="msc-layer-placeholder-wrapper" class="left_bar_menu_div" >
    <?php include("left_menu_detail.php"); ?>
</div>

<a id="audio_upload_submit_btn">refresh</a>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#audio_upload_submit_btn").click(function(){
  $.get("left_menu_detail.php", function(data){
      $(".left_bar_menu_div").html(data);
  });
});

$("#media_child_library_btn").on("click", function() {
   // Do some thing
})
</script>

left_menu_detail.php

<div>
   <div id="media_child_library_btn">
     some btn
   </div>
</div>

Please note that:

The $("#media_child_library_btn") click function works fine once whole page refreshes, but when i reload the specific div using $("#audio_upload_submit_btn") click function, it stop responding.

Things I tried:

• Made sure that the $("#media_child_library_btn") click function is at the top
• used e.stopPropagation(); for $("#media_child_library_btn") click function. No use.

Any help is greatly appreciated.