我在 Safari 中获取按钮 ID 时未定义

Question

我有这个代码工作在Chrome，火狐在pc和android设备，但它不工作在macbook与safari或Iphone与sarafi或Chrome。在变量grupo处没有定义。所以我发送的是& undefined&;

背景:我在文档上创建了一组按钮。准备好身份证了。我有一个函数知道被点击按钮的id，并通过Ajax post请求发送那个id然后得到undefined作为响应

这段代码在每个web导航器中都能很好地工作。仅供参考。

$(document).ready(function(){
//testing Jquery
//console.log("esta funcionando Jquery");
var basicProfile = new URLSearchParams(window.location.search);
const email = basicProfile.get("e");
const imagen = basicProfile.get("imageURL");
var idFechaAgenda;
generarGrupos();
function generarGrupos() {
$.ajax({
url: 'php-grupos.php',
type: 'POST',
data: {email},
success: function(response) {
grupos = JSON.parse(response);
document.getElementById('profilePicture').src = imagen;
document.getElementById('lblNombre').innerText = grupos[0].nombreDocente;
document.getElementById('lblCorreo').innerText = email;
let template = '';
var cont = 0;
grupos.forEach(response => {
template += ` // This work fine in every web navigator
<tr taskId="${grupos[cont].idDocente}">
<td style="display:none">${grupos[cont].idDocente}</td>
<td class="text-center align-middle fw-bold">${grupos[cont].grupoDocente}</td>
<td id="resultado${grupos[cont].idDocente}">
<button type="button" id="${grupos[cont].grupoDocente}" class="btn-verAlumnos btn-primary bg-dark w-100 fw-bold">Ver alumnos</button>
</td>
</tr>
`       
cont++;
});
$('#tableFechas').html(template);
},
error: function(xhr, status, error){
console.log(xhr);
console.log(status);
console.log(error);
}
});
}

有了这段代码，我得到var grupo =未定义的console.log仅在MacOS使用Safari或Iphone使用Safari和Chrome。在其他设备上运行良好

$(document).on('click', '.btn-verAlumnos', (e) =>{
const element = $(this)[0].activeElement;
var grupo = $(element).attr('id'); // i think this is the problem :(
$.ajax({
url: 'php-listaAlumnos.php',
data: {grupo},
type: 'POST',
success: function(response){
let alumnos = JSON.parse(response);
let table = '';
var cont = 0;
alumnos.forEach(alumno => {
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>
`
cont++;
});
$('#tableAlumnos').html(table);
$('#alumnosModal').modal('show');
},
error: function(xhr, status, error){
console.log(xhr);
console.log(status);
console.log(error);
}
});
});

问题:有另一种方法来获得点击按钮的id，并发送它与post请求没有在组变量未定义?(我想这就是问题所在。)

Answer 1

尝试使用e.target而不是this来处理click事件。

您还使用了一些不必要的属性和选择器来获得适当的元素，例如[0]和.activeElement。解释:在click事件中，总是只有1个元素使得[0]选择器无用。另外，.activeElement属性返回具有焦点的元素。您已经确定了在click事件中单击了哪个.btn-verAlumnos。

还请注意，没有必要将元素包装为jQuery元素两次。

考虑到这个解释，试试下面的代码:

// Instead of:
const element = $(this)[0].activeElement;
var grupo = $(element).attr('id');
// Use this:
const element = $(e.target);
var grupo = element.attr('id');