Javascript JQuery Click事件不适用于动态创建的按钮

我能够动态创建组件，但Click事件不能在动态创建的按钮上工作.

以下是代码.

Html文件:

<div class="merge_sections"></div>
    <div style="text-align: center">
         <button type="button" class="btn btn--dark add_mer_sec" style="display: inline-flex;">
            <span style="font-weight:bolder; font-size:30px;">+</span>
            <span style="font-weight: bold">Add Merge Section</span>
         </button>
    </div>
</div>

JS文件:

$('.add_mer_sec').click(function () {
     var cur_ms_len = $('.merge_sections').children().length + 1;
     console.log('cur_ms_len --> ', cur_ms_len)
     $('.merge_sections').append(`<div id="merge_sec-${cur_ms_len}">
             <div class="blockmultitd">
                 <table class="selectfiletable" style="width: 100%; font-weight:500; font-size:15px">
                     <tr>
                         <td style="width: 25%">Select Product</td>
                         <td style="display: flex;">
                             <select class="form-control tanproduct_m" style="width:30%" disabled>
                             </select>
                             <div style="text-align: center; width: 75%">
                                 <button type="button" class="btn btn--dark rem_mer_sec-${cur_ms_len}" style="display: inline-flex;">
                                     <span style="font-weight:bolder; font-size:30px;">-</span>
                                     <span style="font-weight: bold">Remove Merge Section</span>
                                 </button>
                             </div>
                         </td>
                     </tr>
                 </table>
                 <textarea id="att_sel_pair_m-${cur_ms_len}" style="width: 100%; height: 150px; overflow:auto; display: none;"readonly></textarea>
             </div>
         </div>`);
}); // I am able to create components dynamically.

$(document).on('click', '[class^="rem_mer_sec-"]', function() {
        console.log('INNNNN'); //This is not working
});

请帮帮我，谢谢.