1

¡Hola comunidad!

El asunto es que tengo lo siguiente:


introducir la descripción de la imagen aquí


Los elementos de la izquierda son generados dinámcamente en función de datos obtenidos en la BD. Al hacer click en uno de los campos, debo obtener su ID, el cual se corresponde con el ID en la tabla, para poder imprimir los datos en el formulario, pero al hacerlo sucede lo siguiente:

O se seleccionan todos los IDs, o se selecciona sólo el primero o se selecciona un elemento input hidden que tengo dentro del formulario para validar si es registro o modificación de pedido.

Adjunto a continuación el fragmento de código de mi archivo .js:

        $('#data .fields[id^=field_]').click(async() => {
            $('form').attr("action", "http://xx.xx.7.205:3001/api/pedidos/modificar");
            const id = $(this).attr('id'); // WRONG! AQUI NO ME RETORNA EL ID
            const ret = new Buscar();
            const json = ret.buscar(id);
            llenarCamposFormulario(id, json);
            $('.anular').click(async() => {  //i gnorar
                const ret2 = new eliminarPedido();
                const what = await ret2.buscar(id);
                console.log(what);
                resetFields();
            });
        });
1

1 respuesta 1

0

Como te dije en el comentario, dentro de una función flecha no hay disponible un this propio y tomará el del contexto donde fue creada (función, clase, etc.).

        $('#data .fields[id^=field_]').click(async() => {
            const id = $(this).attr('id'); // Esto no funciona
            console.log(id);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
<input type="text" class="fields" id="field_1">
<input type="text" class="fields" id="field_2">
<input type="text" class="fields" id="field_3">
<input type="text" class="fields" id="field_4">
</div>

Afortunadamente para ti, cuando agregas una función para escuchar eventos, el evento siempre es visible dentro de esa función, aunque no lo hayas enviado como parámetro y puedes acceder al elemento disparador con event.target para obtener el atributo que necesitas.

        $('#data .fields[id^=field_]').click(async() => {
            const id = $(event.target).attr('id');
            console.log(id);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
<input type="text" class="fields" id="field_1">
<input type="text" class="fields" id="field_2">
<input type="text" class="fields" id="field_3">
<input type="text" class="fields" id="field_4">
</div>

Supongamos que quieres agregar un parámetro en .click(async(nombre_parametro) => {, pensando en que se pudiera enviar el elemento actual, pero lo que realmente estás haciendo es especificar que se va a acceder al evento con nombre_parametro.

        $('#data .fields[id^=field_]').click(async(e) => {
            const id = $(e.target).attr('id'); // e - Acceder al evento
            console.log(id);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
<input type="text" class="fields" id="field_1">
<input type="text" class="fields" id="field_2">
<input type="text" class="fields" id="field_3">
<input type="text" class="fields" id="field_4">
</div>

1
  • Gracias por toda la info!! Que la ayuda se te devuelva multiplicada.
    – Jean Louis
    Commented el 4 jun. 2020 a las 17:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.