Obter o valor de uma entrada específica que é adicionada dinamicamente a partir de uma chamada ajax

cabeça de van niels

Quero obter o valor de uma entrada específica em um onclickevento

Esta função recupera todos os dados do meu back-end

Javascript

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    data: {
      functionToCall: 'project',
    },
    url: 'http://localhost/WBS/php/api/requests/get.php',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
                </td>
                <td>
                  <input class="form-control projectName" type="text" name="projectName[]" value="${value.title}">
                </td>
                <td>
                  <input class="form-control description" type="text" name="description[]" value="${value.description}">
                </td>
                <td>
                  <input class="form-control estimatedTime" type="text" name="estimatedTime[]" value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control actualTime" type="text" name="actualTime[]" value="${value.Actual_time}">
                </td>
                <td>
                  <a class="btn btn-info addTask" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button value="${value.projectid}" type="button" name="deleteProject" class="btn btn-danger deleteProject">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

Eu gostaria de obter o valor desta entrada específica

<td>
    <input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
</td>

Eu tentei usar isso

  $(document).on('click', '.btn.btn-danger.deleteProject', () => {
    let id = $(this).find('tr').closest('.form-control.projectid');
    deleteProject(id); // this is an ajax call that deletes a project with said ID
  });

Mas console.logging retorna indefinido em todos os cliques de botão, eu tentei codificá-lo

  $(document).on('click', '.btn.btn-danger.deleteProject', () => {
    let id = $('.btn.btn-danger.deleteProject').val();
    deleteProject(id);
  });

E isso retorna um ID, o problema é que só retorna o primeiro ID o tempo todo.

Minha pergunta é: como faço para obter o referido valor de entrada de um evento onclick?

Alex V

closesttesta o próprio elemento e seu ancestorspara corresponder ao seletor.

O que você precisa fazer é: localizar o mais próximo trdo botão clicado e, dentro dele, trlocalizar a entrada, algo assim:

  $(document).on('click', '.btn.btn-danger.deleteProject', function() {
    const id = $(this).closest('tr').find('.form-control.projectid').val();
    deleteProject(id);
  });

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

TOP lista

quentelabel

Arquivo