Safari点击动态生成按钮获取ID返回undefined 求兼容方案

• 你给点击事件绑定了箭头函数，箭头函数没有独立的this作用域，此处this指向全局window对象而非被点击的按钮
• 不同浏览器对document.activeElement的更新时机实现不一致：Chrome、Firefox会在click回调执行前更新activeElement为点击的元素，但Safari系WebKit内核的浏览器会在click回调执行完成后才更新activeElement，因此你拿到的不是目标按钮，自然读取id得到undefined

直接用事件对象自带的target属性获取触发点击的元素，这是W3C标准的实现，全平台兼容，不需要依赖activeElement或者this指向。
只需要把原来点击事件里的这两行：

const element = $(this)[0].activeElement;
var grupo = $(element).attr('id');

替换为：

var grupo = $(e.target).attr('id');

完整修复后代码 #

$(document).on('click', '.btn-verAlumnos', (e) =>{
    // 直接通过事件对象拿触发点击的按钮
    var grupo = $(e.target).attr('id');
    $.ajax({
      url: 'php-listaAlumnos.php',
      data: {grupo},
      type: 'POST',
      success: function(response){
        let alumnos = JSON.parse(response);
        let table = '';
        // 优化：forEach自带索引参数，不需要自己维护cont变量
        alumnos.forEach((alumno, cont) => {
          table += `
            <tr AlumnoId="${alumnos[cont].num}">
              <td class="text-center align-middle fw-bold">${alumnos[cont].num}</td>
              <td id="Alumno${alumnos[cont].num}" class="text-center align-middle fw-bold">${alumnos[cont].matricula}</td>
              <td class="text-center align-middle fw-bold">${alumnos[cont].nombre}</td>
            </tr>
          `
        });
        $('#tableAlumnos').html(table);
        $('#alumnosModal').modal('show');
      },
      error: function(xhr, status, error){
        console.log(xhr);
        console.log(status);
        console.log(error);
      }
    });
  });

如果不想用箭头函数，也可以改成普通函数绑定，直接用this获取被点击元素：

$(document).on('click', '.btn-verAlumnos', function(e) {
    var grupo = $(this).attr('id');
    // 后续逻辑和原有代码保持一致
})

两种方案都可以解决跨浏览器兼容问题，优先推荐用e.target的方案，逻辑更清晰，不受函数绑定方式影响。

内容的提问来源于stack exchange，提问作者Fuss