0

Tengo el siguiente código:

<input class="search_query form-control" type="text" name="key" id="key" placeholder="Buscar..." >
<div id="suggestions" name="suggestions"></div>

$('#key').on('keyup', function() {}

Y funciona correctamente, pero yo necesito poder crear varias líneas (eso ya se como se hace), y poder acceder a onkeyup de cada línea pero no se como hacerlo.

Os pongo un ejemplo:

 <input class="search_query form-control" type="text" name="key[]" id="key[]" placeholder="Buscar..." >
    <div id="suggestions[]" name="suggestions[]"></div>

  <input class="search_query form-control" type="text" name="key[]" id="key[]" placeholder="Buscar..." >
    <div id="suggestions[]" name="suggestions[]"></div>

$('#key').on('keyup', function() {}

En este caso el onkeyup no funciona. ¿Alguien puede ayudarme?.

Gracias.

1
  • Cada elemento del DOM debe tener un único identificador id distinto de todos los demás elementos del mismo documento. Tal como lo planteas en tu pregunta, tienes elementos con id repetido. Saludos Commented el 14 dic. 2020 a las 15:21

6 respuestas 6

0

Si cambio a:

<input class="search_query form-control" type="text" name="key[]" id="key1" placeholder="Buscar..." >
<div id="suggestions1" name="suggestions[]"></div>

<input class="search_query form-control" type="text" name="key[]" id="key2" placeholder="Buscar..." >
<div id="suggestions2" name="suggestions[]"></div>

Yo no se cuantas lineas se van a crear, no tiene limite, tengo que crear diferentes

$('#key1').on('keyup', function() {}
$('#key2').on('keyup', function() {}

Probando esto, no es lo logico, cuando hago onkeyup en el key2 no lo reconoce.

0
function addRow() {
     var addRow = '<tr>\n' +
                '         <td><input class="search_query form-control" type="text" name="key[]" id="key[]" placeholder="Buscar..." ><div id="suggestions" name="suggestions"></div></td>\n'+
            '<td><input type="text" name="desc[]" class="form-control desc" id="desc[]" value=""></td>\n'+
            '<td><input type="text" name="qty[]" class="form-control qty" id="qty[]" value="1"></td>\n'+
            '<td><input type="text" name="price[]" class="form-control price" id="price[]" value=""></td>\n'+
            '<td><input type="text" name="dis[]" class="form-control dis" id="dis[]" value=""></td>\n'+
            '<td><input type="text" name="dis2[]" class="form-control dis2" id="dis2[]" value=""></td>\n'+
            '<td><input type="text" name="tax[]" class="form-control tax" id="tax[]" value=""></td>\n'+
            '<td><input type="text" name="amount[]" class="form-control amount" id="amount[]" value=""></td>\n'+
            '<input type="hidden" name="base[]" class="form-control base" id="base[]" value="">\n'+
            '<input type="hidden" name="tdto[]" class="form-control tdto" id="tdto[]" value="">\n'+
            '<input type="hidden" name="ttax[]" class="form-control ttax" id="ttax[]" value="">\n'+
            '<td><input type="checkbox" name="record" id="delete-row"></td>\n'+
            '</tr>';
                 $('tbody').append(addRow);
        };
2
  • Las respuestas que estas poniendo no son respuestas reales. Deberías de editar tu pregunta y añadirlo ahi.
    – Aitor
    Commented el 15 dic. 2020 a las 11:30
  • No sabia como hacerlo y lo hice como respuesta. Ahora ya lo se. Gracias Commented el 15 dic. 2020 a las 12:26
0

Si la función que quieres ejecutar en el keyup es la misma para todas, puedes asociar el evento a una clase en lugar de un id.

$('.search-query').on('keyup', function() {}

Así cualquier input con la 'class' search-query, tendrá el evento keyup asociado.

$('.search_query').keyup(function(){
  var element = $(this);
  console.log(element.val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="search_query" id="1"/>
<input class="search_query" id="2"/>
<input class="search_query" id="3"/>

5
  • Gracias por tu ayuda. Commented el 14 dic. 2020 a las 22:22
  • Lo he probado y sobre la primera linea funciona pero cuando creo la segunda linea no reconoce la funcion, $('.search-query').on('keyup', function() {} Alguna idea porque no lo hace? Commented el 14 dic. 2020 a las 22:23
  • Puedes poner el contenido de la función?
    – khsoldier
    Commented el 15 dic. 2020 a las 9:14
  • He añadido la funcion como respuesta Commented el 15 dic. 2020 a las 10:09
  • No veo que puede fallar, échale un ojo a mi respuesta, he añadido un ejemplo, prueba a poner console.log('funciona') en varios puntos de tu js e itenta averiguar si es que ni siquiera se llama a la función, o es algo dentro de la función que está causando problemas.
    – khsoldier
    Commented el 15 dic. 2020 a las 10:37
0

Cuando creas elementos dinámicos no puedes seleccionarlos directamente con JQuery.

Prueba a utilizar este selector:

$(document).on('keyup','.search_query', function() {
    //código del keyup...
})
1
  • Gracias, si que funciona. Commented el 15 dic. 2020 a las 15:16
0

La funcion no la llama porque pongo un console.log y un alert y no dice nada, pero si miro el código generado yo lo veo bien.

 <tbody>
    <tr>
        <td>
        <div id="sproduct"> 
            <input class="search_query form-control" type="text" name="key[]" id="key_1" placeholder="Buscar..." data-type="reference">
            <div id="suggestions" name="suggestions"></div>
        </div>
        </td>
        <td><input class="search_query form-control desc" type="text" name="desc[]" id="desc_1" value="" data-type="description"></td>
        <td><input type="text" name="qty[]" class="form-control qty" id="qty[]" value="1"></td>
            <td><input type="text" name="price[]" class="form-control price" id="price[]" value=""></td>
            <td><input type="text" name="dis[]" class="form-control dis" id="dis[]" value=""></td>
            <td><input type="text" name="dis2[]" class="form-control dis2" id="dis2[]" value=""></td>
            <td><input type="text" name="tax[]" class="form-control tax" id="tax[]" value=""></td>
            <td><input type="text" name="amount[]" class="form-control amount" id="amount[]" value=""></td>
            <input type="hidden" name="base[]" class="form-control base" id="base[]" value="">
            <input type="hidden" name="tdto[]" class="form-control tdto" id="tdto[]" value="">
            <input type="hidden" name="ttax[]" class="form-control ttax" id="ttax[]" value="">
        <td><input type="checkbox" name="record" id="delete-row"></td>
         </tr>
    <tr>
         <td><input class="search_query form-control" type="text" name="key[]" id="key2" placeholder="Buscar..."><div id="suggestions" name="suggestions"></div></td>
    <td><input type="text" name="desc[]" class="form-control desc" id="desc2" value=""></td>
    <td><input type="text" name="qty[]" class="form-control qty" id="qty[]" value="1"></td>
    <td><input type="text" name="price[]" class="form-control price" id="price[]" value=""></td>
    <td><input type="text" name="dis[]" class="form-control dis" id="dis[]" value=""></td>
    <td><input type="text" name="dis2[]" class="form-control dis2" id="dis2[]" value=""></td>
    <td><input type="text" name="tax[]" class="form-control tax" id="tax[]" value=""></td>
    <td><input type="text" name="amount[]" class="form-control amount" id="amount[]" value=""></td>
    <input type="hidden" name="base[]" class="form-control base" id="base[]" value="">
    <input type="hidden" name="tdto[]" class="form-control tdto" id="tdto[]" value="">
    <input type="hidden" name="ttax[]" class="form-control ttax" id="ttax[]" value="">
    <td><input type="checkbox" name="record" id="delete-row"></td>
        </tr></tbody>
0

Ya he econtrado la solución a que no funciona la función keyup en las lineas generadas automáticamente.

Lo que hay que hacer es un bind que ahora es obsoleto y hay que usara la funcion on y de esta forma ya funciona.

$(".table-bordered").on("keyup", ".search_query", function(){
                        var element = $(this);
                        console.log(element.val());
          });

Gracias por su ayuda.

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