Jquery click event is not working for dynamically created buttons

I am able to create components dynamically, but click event is not working on dynamically created buttons.

Here is the code.

HTML file:

<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 File:

$('.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
});

Please help me, Thanks.

>Solution :

The issue is because you’re using the ‘Attribute Begins With’ selector. Your full class string is "btn btn--dark rem_mer_sec-${cur_ms_len}", which does not begin with rem_mer_sec-.

To fix the problem, select those elements using a common class that’s applied to them all, instead of an attribute selector, something like this:

<button type="button" class="btn btn--dark rem_mer_sec 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>

$(document).on('click', '.rem_mer_sec', function() {
  console.log('INNNNN');
});

As a side note, I would strongly suggest you remove that dynamically created class name. It’s an anti-pattern which normally creates more issues than it solves. If you want to associate custom metadata with an HTML element, use a data attribute instead.

In addition, your HTML should not contain CSS styling rules. Put those in an external CSS stylesheet.