当我在 Safari 中获取按钮 ID 时，我变得不确定

Question

我的代码在 Chrome、PC 上的 Firefox 和 android 设备上运行良好，但在带有 safari 的 macbook 或带有 sarafi 的 Iphone 或 Chrome.我在变量组中变得不确定。所以我在 Ajax 请求中发送“undefined”。

上下文： 我在 document.ready 上创建了一组带有 ID 的按钮。我有一个函数可以知道单击按钮的 ID，并使用 Ajax post 请求发送该 ID，我得到未定义的响应。

此代码适用于每个网络导航器。仅供参考。

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

使用此代码，我仅在使用 Safari 的 MacOS 或使用 Safari 和 Chrome 的 Iphone 中使用 console.log 获得 var grupo = undefined。使用其他设备工作正常。

$(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 请求发送它，而不会在组变量中得到 undefined 吗？（我认为这是问题所在）。

Answer 1

尝试在 click 事件中使用 e.target 而不是 this。

您还使用了一些不必要的属性和选择器来获取适当的元素，例如 [0] 和 .activeElement。解释：在 click 事件中，总是只有 1 个元素使 [0] 选择器无用。此外，.activeElement 属性 returns 哪个元素具有焦点。您已经确定在 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');

当我在 Safari 中获取按钮 ID 时，我变得不确定

I'm getting undefined when i'm getting the button id in Safari

javascript

safari

jquery