[SOLUCIONADO] método creado en ready, no es invocado

[malakian]

Buenas forer@s

tengo un evento definido en el ready

Código Javascript:

$(document).ready(function (){
  $('.cajas').keyup(function (){
     alert("presionando tecla");
  });
});
 

hasta ahi bien, ahora tengo un boton (en el ready) que crea cajas de texto. ejemplo:

Código Javascript:

$("#boton").click(function (){
    $("#divrespuesta").html('<input type="text" class="cajas" />');
  });
 
el boton funciona bien, ahora como se dan cuenta la caja que cree mediante el boton tiene la clase "cajas" lo que yo quiero es que como ya se creo con esa clase se dispare en evento keyup definido anteriormente, pero no lo hace, [B]creo que es por que la caja no existia hasta que oprimí el botón[/B], no se si hay aguna forma de hacer eso.
 
lo que intento es hacer un "evento generico" para mis cajas de texto, espero haber sido claro, muchas gracias
 

[3nr1c]

creo que es por que la caja no existia hasta que oprimí el botón

Tú lo has dicho. La manera que tienes para crear un evento genérico es asignando el evento a cada caja después de crearla:

Código Javascript:

$("#boton").click(function (){
    $("#divrespuesta").html('<input type="text" class="cajas" />').keyup(function (){
     alert("presionando tecla");
  });
  });
 

Un saludo

[malakian]

Hola 3nr1c

muchas gracias por la respuesta, pero eso es exactamente lo que quiero evitar, no quisiera estar escribiendo la misma linea de código todo el tiempo, es decir, escribir el keyup cada vez que creo una caja de texto... quisiera que fuera generico, cosa que cree una caja con esa clase y ya se comportara segun las acciones definidas en el evento

[3nr1c]

Puedes crear un pequeño plugin que te haga el trabajo...

Código Javascript:

$.fn.tecla = function(){
this.keyup(function (){
     alert("presionando tecla");
  });
}
 

Código Javascript:

$("#divrespuesta").html('<input type="text" class="cajas" />').tecla();
 

[malakian]

Interesante 3nr1c

ahora imagina esto:

hago un each de una respuesta json del server

Código Javascript:

var opciones = "";
$.each(arreglo, function (i,v){
  var opciones += '<tr><td><input type="text" class="cajas" /></td></tr>';
});
$("#divrespuesta").html(opciones);
 

bueno para mi caso no es .html() si no .append() a una tabla <table>

lo que me aconsejas funcionaria para este caso? el hecho es que creo muchas cajas de texto de forma dinamica y quisiera que todas tuvieran la misma acción.

Muchas gracias por las respuestas

[3nr1c]

creo que podría funcionar cambiándolo un poco:

Código Javascript:

//var opciones = "";
$.each(arreglo, function (i,v){
  //var opciones += '<tr><td><input type="text" class="cajas" /></td></tr>';
  var input = $(document.createElement('input'));
  $(input).attr({type:'text',class:'cajas'}).tecla();
  $('#divrespuesta').append($(input));
});
//$("#divrespuesta").html(opciones);
 

Más o menos algo así, pruébalo y me dices.