Problema explicado en video: Asignar eventos a objetos creados dinámicamente

Celcius · #1 (**permalink**) 30/03/2012, 13:43

Hola amigos, necesito que los objetos que yo cree dinámicamente adquieran tambien los eventos asignados para todos los objetos de su tipo que fueron creados cuando la pagina fue cargada, aquí les dejo un video de explicacion de mi problema:

http://www.youtube.com/watch?v=Hu2Hz...ature=youtu.be

Espero sus comentarios.

Naahuel · #2 (**permalink**) 30/03/2012, 14:39

No he visto el video, pero leé en la documentación

.live()
.delegate()

Ejemplo (de la documentación):

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>
 
  <span></span>
<script>
$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});
</script>
 
</body>
</html>

Como verás, los párrafos que se añaden dinámicamente heredan la función asignada al evento click.

Celcius · #3 (**permalink**) 30/03/2012, 14:41

Gracias por la respuesta, he utilizado el método .On, utilizo dos clases, una para identificar la caja "madre" y la otra para identificar a la caja de texto (en realidad textarea), mi codigo es el siguiente:

Código Javascript:

Ver original$(".caja-comment").on("click", ".ingreso-comentario", function(){
        if($(this).val()=="Escribe un comentario..."){
            $(this).val("");
        }
        $(this).css("color","black");
    });

Con ese codigo hago que funcionen las cajas de texto, me gustaría que veas el video que solo dura poco mas de un minuto. Gracias.

Naahuel · #4 (**permalink**) 30/03/2012, 14:52

El video no me dice nada nuevo. Cambiando .on() por .live() debería funcionar sin mayores complicaciones.

Naahuel · #5 (**permalink**) 30/03/2012, 14:54

Si usás una "caja madre" o algo así, .delegate() se usa de esta forma:

Código Javascript:

Ver original$('#padre').delgate('.elementos-hijo','click',function(){
    //...
});

Si entendí bien, tu código debería ser así:

Código Javascript:

Ver original$('.ingreso-comentario').delgate('.caja-comment','click',function(){
    if($(this).val()=="Escribe un comentario..."){
        $(this).val("");
    }
    $(this).css("color","black");
});

Celcius · #6 (**permalink**) 30/03/2012, 14:54

A ver, un segundo voy a probar.

Naahuel · #7 (**permalink**) 30/03/2012, 14:55

¿Probaste con .delegate() como te mostré en el post anterior? Creo que nos pisamos los talones al responder :P

Celcius · #8 (**permalink**) 30/03/2012, 15:00

Si por lo visto si estamos pisandonos los talones al responder jeje. Bueno, acabo de probar y probé con el método delegate pero nada, eso es lo que me parece raro... tambien probé con live y no funciona... será porque es un objeto de formulario y no una etiqueta comun y corriente? :S (Mi comentario 600, snif :') )

Naahuel · #9 (**permalink**) 30/03/2012, 15:07

Mostrame un poco más de código. El html y el resto de los scripts. Si lo tenés funcionando en algún lugar mejor.

No hay razón por la que no funcionaría así.

Celcius · #10 (**permalink**) 30/03/2012, 15:09

Ok, puedo contactarte por Msn o Skype y te paso por ese medio toda la información, luego vuelvo aquí y menciono cual fue la solución que encontramos para que los uqe lean sepan en qué quedó. Mi skype es rickymuvel y mi cuenta de msn es la misma pero en hotmail.com

masterpuppet · #11 (**permalink**) 30/03/2012, 15:10

Si estas utilizando jQuery 1.7+ deberías utilizar on y postea el html que estas utilizando.

Saludos.

Celcius · #12 (**permalink**) 30/03/2012, 15:10

Si justamente porque tengo Jquery 1.7+ estaba usando el metodo .on.. pero no funciona.

masterpuppet · #13 (**permalink**) 30/03/2012, 15:13

Pues quedate con on entonces, postea el html pls, asumo que el código lo tienes en el ready y el elemento .caja-comment existe cuando asignas el evento, verdad ?.

Celcius · #14 (**permalink**) 30/03/2012, 15:17

Ok aquí va el codigo HTML:

Código HTML:

Ver original<div id="izquierda">
        <div id="form-posteo">
            <form action="#" method="post" name="nuevo_post" id="nuevo_post">
                    <textarea name="post" id="post" class="post">Publicar nuevo mensaje en el Muro...</textarea>
                    <div class="boton"><input type="submit" name="enviar" value="Publicar" /></div>
            </form>
        </div>
        <div id="count-caracteres"></div>
        <div id="datos-personales">
            <div>
                <p><b>Usuario:</b> <i>No has elegido un nombre de usuario</i></p>
                <p><b>Colegio:</b> <i>No definido</i></p>
            </div>
        </div>
    </div>
    <div id="derecha">
        <div id="posteos">
            <?php
            $con = new conexion();
            $consulta = $con->Consulta("SELECT sm_post.*, sm_usuario.nombre_usuario FROM sm_post INNER JOIN sm_usuario ON sm_post.id_usuario=sm_usuario.id_usuario WHERE sm_usuario.id_usuario='". $_SESSION['id'] ."' ORDER BY sm_post.id DESC LIMIT 0,10");
            while($datos = mysql_fetch_assoc($consulta)){
                ?>
                <div class="publicacion">
                    <header>
                        <div class="titulo-user"><i>@<?=$datos["nombre_usuario"] ?></i> <span class="escribio">escribi&oacute;</span>:</div>
                        <div class="titulo-fecha"><?=$datos["fecha"] ?></div>
                    </header>
                    <div class="post-contenido">
                        <?=$datos["post"]?>
                    </div>
                    <div id="comentarios-post-<?=$datos["id"]?>">
                        <h3>Comentarios</h3>
                        <?php
                        $con = new conexion();
                        $consulta2 = $con->Consulta("SELECT sm_comentario.*, sm_usuario.nombre_usuario FROM sm_comentario INNER JOIN sm_usuario ON sm_comentario.id_usuario=sm_usuario.id_usuario WHERE sm_usuario.id_usuario='". $_SESSION['id'] ."' and id_post='". $datos["id"] ."' ORDER BY sm_comentario.id_comentario ASC");
                        while($datos2 = mysql_fetch_assoc($consulta2)){
                            ?>
                            <div class="comment-user">
                                <header>
                                    <div>
                                        <i><b>@<?=$datos2["nombre_usuario"] ?></b></i> 
                                        <span class="escribio">comentó</span>:
                                    </div>
                                </header>
                                <div class="comment-contenido">
                                    <?=$datos2["comentario"]?>
                                </div>
                            </div>
                            <?
                        }
                        ?>
                    </div>
                    <div class="form-comment">
                        <form action="#" name="form-comment-<?=$datos["id"]?>" method="post" id="form-comment-<?=$datos["id"]?>">
                            <p class="caja-comment"><textarea name="input-comment-<?=$datos["id"]?>" id="input-comment-<?=$datos["id"]?>" class="ingreso-comentario">Escribe un comentario...</textarea></p>
                        </form>
                    </div>
                </div>
                <?
            }
            ?>
        </div>
    </div>

Notas, las clases izquierda y derecha corresponden a la parte donde se ingresan los post (izquierda) y al lugar donde estarán los post (derecha).

JQuery

nuevo_post.js

Código Javascript:

Ver original$(document).ready(function(){
    $("#post").click(function(){
        $("#post").fadeIn('slow', function(){
            $("#post").css("height","50px");
            $("#post").css("color","#464646");
            $(".boton").css("display","block");
            if($("#post").val()=="Publicar nuevo mensaje en el Muro..."){
                $("#post").val("");
            }
        });
    });
 
    $("#post").keypress(function(event){
        // tamaño
        var tam = $("#post").val().length;
        // variable para colocar el mensaje del numero de caracteres
        var num_car = "<b style=\"color: black\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
        if(tam>100 && tam<=140){
            num_car = "<b style=\"color: orange\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
        }else if(tam>140){
            num_car = "<b style=\"color: red\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
        }
        $("#count-caracteres").html(""+ num_car +"");
    });
    // si el clic del mouse sale del textarea entonces vuelve a su estado normal
    $("#nuevo_post").submit(function(){
        if($("#post").val()=="" || $("#post").val()=="Publicar nuevo mensaje en el Muro..." ){
            $("#mensaje").html("No puede dejar vacio el campo de texto");
            $("#mensaje").focus();
            $("#mensaje").dialog({
                modal   : true,
                title   : "Encontramos un error",
                buttons : {
                    "Ok": function(){
                        $(this).dialog("close");
                    }
                }
            });
        }else{
            $.ajax({
                data        : $(this).serialize(),
                type        : "POST",
                dataType    : "json",
                url         : "ingresar_post.php",
                success: function(data){
                    if(data.tipo=='error'){
                        $("#mensaje").html("No se ha podido ingresar el Post");
                        $("#mensaje").dialog({
                            modal   : true,
                            title   : "Encontramos un error",
                            buttons : {
                                "Ok": function(){
                                    $(this).dialog("close");
                                }
                            }
                        });
                    }else{
                        // Buscamos en la base de datos y colocamos en el primer cuadro:
                        $.ajax({
                            url         : "extraer_ultimo_post.php",
                            dataType    : "json",
                            success     : function(data){
                                $("#posteos").prepend("<div class=\"publicacion\"><header><div class=\"titulo-user\"><i>@"+ data.nombre_usuario +"</i> <span class=\"escribio\">escribió</span>:</div><div class=\"titulo-fecha\"></div></header><div class=\"post-contenido\">"+ data.post +"</div><div id=\"comentarios-post-"+ data.id +"\"><h3>Comentarios</h3></div><div class=\"form-comment\"><form action=\"#\" name=\"form-comment-"+ data.id +"\" method=\"post\" id=\"form-comment-"+ data.id +"\"><p class=\"caja-comment\"><textarea name=\"input-comment-"+ data.id +"\" id=\"input-comment-"+ data.id +"\" class=\"ingreso-comentario\">Escribe un comentario...</textarea></p></form></div></div>");
                                $("#post").css("height","25px");
                                $("#post").css("color","#A0A0A0");
                                $("#post").val("Publicar nuevo mensaje en el Muro...");
                            }
                           });
                    }
                }
               });
        }
        return false;
    });
});

/*function limpiarCaja(elemento){
if($("#"+ elemento.id +"").val()!="Escribe un comentario..."){
$("#"+ elemento.id +"").val("");
$("#"+ elemento.id +"").css("color","black");
}
}*/

nuevo_comment.js

Código Javascript:

Ver original$(document).ready(function(){
    $('.caja-comment').on('.ingreso-comentario','click',function(){
        if($(this).val()=="Escribe un comentario..."){
            $(this).val("");
        }
        $(this).css("color","black");
    });
 
    /*$(".caja-comment").live("click", ".ingreso-comentario", function(){
        if($(this).val()=="Escribe un comentario..."){
            $(this).val("");
        }
        $(this).css("color","black");
    });*/
    /*$(".caja-comment textarea").click(function(){
        //alert($(this).attr("id"));
        if($(this).val()=="Escribe un comentario..."){
            $(this).val("");
        }
        $(this).css("color","black");
    });*/
    $(".caja-comment").on("keyup",".ingreso-comentario", function(event){
        if(event.keyCode=='13'){
        // cuando deseemos enviar el comentario entonces capturamos el idenficador del post.
        var identificador   = $(this).attr("id");
        var arreglo         = identificador.split("-");
        var id              = arreglo[2]; // variable que almacena el ID del POST
 
            // recogemos el valor de dicho campo
            var comentario = $(this).val();
            $(this).val("");
            $.ajax({
                data        : "comment="+ comentario +"&id_post="+ id,
                type        : "POST",
                dataType    : "json",
                url         : "ingresar_comentario.php",
                success: function(data){
                    if(data.tipo=='error'){
                        $("#mensaje").html("No se ha podido ingresar el comentario");
                        $("#mensaje").dialog({
                            modal   : true,
                            title   : "Encontramos un error",
                            buttons : {
                                "Ok": function(){
                                    $(this).dialog("close");
                                }
                            }
                        });
                    }else{
                        // Buscamos en la base de datos y colocamos en el primer cuadro:
                        $.ajax({
                            url: "extraer_ultimo_comentario.php",
                            dataType: "json",
                            success: function(data){
                                $("#comentarios-post-"+id).append("<div class=\"comment-user\"><header><div><i><b>@"+ data.nombre_usuario +"</b></i> <span class=\"escribio\">comentó</span>:</div></header><div>"+ data.comentario +"</div></div>");
                            }
                           });
                    }
                }
            });
 
        }
    });
    
    $(".caja-comment textarea").blur(function(){
        if($(this).val()==""){
            $(this).css("color","#A8C2D7");
            $(this).val("Escribe un comentario...");
        }
    });
});

Si necesitan el PHP me avisan (lo dudo). Gracias por su tiempo!

masterpuppet · #15 (**permalink**) 30/03/2012, 15:40

Tienes invertidos los parámetros

Código Javascript:

Ver original$('.caja-comment').on('.ingreso-comentario','click',function(){...});

en realidad es:

Código Javascript:

Ver original$('.caja-comment').on('click', '.ingreso-comentario', function(){...});

Celcius · #16 (**permalink**) 30/03/2012, 15:46

Hice la corrección pero está igual que en el video, en realidad ese trozo de codigo (el que me acabas de corregir, lo copié y pegué de una sugerencia arriba... si ves el comentario que hay debajo de ese codigo está bien la sintaxis... sigue igual :S

masterpuppet · #17 (**permalink**) 30/03/2012, 15:56

Es que debería funcionar, estas seguro que nuevo_comment.js se esta cargando ?, y no creo que sea en el click que deberias asignar el evento, no seria en el focus y en el blur ?, hay plugins que lo hacen y si estas utilizando html5 puedes hacer uso de placeholder, te dejo una referencia http://viget.com/inspire/a-better-jq...d-label-plugin, de todas formas tal cual lo tienes deberia funcionar.

Saludos.

Celcius · #18 (**permalink**) 30/03/2012, 16:09

nuevo_comment.js si se está cargando porque su efecto es visible en todos los otros cuadros de texto que han sido cargados con la página. Mas bien la alternativa de placeholder me parece perfecta (no estoy usando HTML5 pero no veo porqué no usarlo).

Por otro lado, hice una prueba (anteriormente) creando el objeto con un "atributo" onclick="limpiarCaja(this)" o algo asi y me apareció el nombre del cuadro identificado como "objeto-id" (ej. objeto-54) al cual podía borrarle su contenido utilizando jquery haciendo algo como $(this.id).val("") y si, se borraba, el tema es que haría un codigo demasiado redundante y eso tampoco quiero... si utilizo placeholder solucionaría ese problema pero... que pasa cuando presiono la tecla Enter... que puedo hacer? es posible colocar todo ese codigo dentro de una funciona a la cual llame siempre??? para evitar redundancia de codigo me refiero.