jQuery动态创建按钮的点击事件无法触发问题求助

问题原因 #

你当前使用的删除按钮选择器[class^="rem_mer_sec-"]是匹配class属性以指定字符串开头的元素，但动态生成的按钮class为btn btn--dark rem_mer_sec-${cur_ms_len}，rem_mer_sec-并非class属性的开头，导致选择器无法匹配目标按钮，点击事件自然不会触发。

解决方案 #

方案1：修正属性选择器 #

将匹配规则改为class属性包含指定字符串，用*=替代^=：

$(document).on('click', '[class*="rem_mer_sec-"]', function() {
    console.log('INNNNN');
    // 补充删除逻辑：通过class提取section编号并移除对应模块
    const secNum = $(this).attr('class').match(/rem_mer_sec-(\d+)/)[1];
    $(this).closest('#merge_sec-' + secNum).remove();
});

方案2：使用通用类（推荐） #

给所有删除按钮添加通用类（如rem_mer_sec），同时用data属性存储关联模块的ID，让事件绑定更简洁规范：

1. 修改动态生成按钮的代码：

$('.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" style="display: inline-flex;" data-section-id="merge_sec-${cur_ms_len}">
                                 <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>`);

2. 绑定点击事件：

$(document).on('click', '.rem_mer_sec', function() {
    console.log('INNNNN');
    // 通过data属性获取模块ID并移除
    const sectionId = $(this).data('section-id');
    $('#' + sectionId).remove();
});

这种方式脱离了对class命名规则的依赖，代码可读性和维护性更强，是处理动态元素事件的常规最优方式。

内容的提问来源于stack exchange，提问作者Surendranatha Reddy T