[SOLUCIONADO] append me quita los eventos

Cambron · #1 (**permalink**) 17/07/2014, 09:41

Hola que tal?
Un saludo para todos, bien intentare explicar mi problema.

Tengo una tabla y le voy añadiendo filas con append.. El problema viene cuando quiero hacer algo sobre esas filas aunque les ponga clases o id´s no acepta los eventos no me saca ni un alert.
Espero puedan ayudarme.. Muchas gracias de antemano

Alexis88 · #2 (**permalink**) 17/07/2014, 10:08

Muéstranos el código que has elaborado para poder ayudarte. Por favor, no olvides usar el highlight de JavaScript para mostrar el código.

Saludos

Cambron · #3 (**permalink**) 17/07/2014, 10:23

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(function(){
        /**
         * Funcion para añadir una nueva columna en la tabla
         */
        $("#add").on('click', function(){
 
            $(".tabla").append('<input type="text" class="llenar1"/>');
        });
        
    });
    $(document).ready(function()
{
    $('.llenar1').click(function()
    {
        event.preventDefault();
    alert("prueba");
    var data2 = $(this).attr("data-valor");
    alert(data2);
    
        
    });
});
    </script>
    
    <style>
    #add, #del  {cursor:pointer;text-decoration:underline;color:#00f;}
    </style>
</head>
 
<body>
<div id="add">pulsa aquí para añadir una nueva fila desde jquery</div>
<div id="del">pulsa aquí para eliminar la ultima fila desde jquery</div>
<p>
    <table class="tabla" border=1>
        <tr class='llenar1'>
            <td>primera columma</td>
            <td>segundo columna</td>
            <input type='text' value='pueba' class='llenar1'/>
            <!-- podemos añadir tantas columnas como deseemos -->
            <!--<td>tercera columna</td>-->
        </tr>
                <tr class='llenar1'>
            <td>primera columma</td>
            <td>segundo columna</td>
            <input type='text' value='pueba' class='llenar1'/>
            <!-- podemos añadir tantas columnas como deseemos -->
            <!--<td>tercera columna</td>-->
        </tr>
    </table>

Cambron · #4 (**permalink**) 17/07/2014, 10:24

las dos filas originales si me mandan el alert, pero el elemento agregado con append no

Alexis88 · #5 (**permalink**) 17/07/2014, 11:06

Eso sucede porque el método solo afecta a los elementos que cargaron al inicio, los que carguen después no se verán afectados pues el código JS ya se ejecutó.

Podrías hacerlo así:

Código Javascript:

Ver original$(document).ready(function(){
    function aplicar(){
        $('.llenar1').click(function(){
            alert("prueba"); 
        });
    }
    
    $("#add").on('click', function(){
        $(".tabla").append('<input type="text" class="llenar1"/>');
        aplicar();
    });
  
    aplicar();
});

De este modo, cuando cargue la página, se ejecutará la función aplicar en la cual asignarás a todas las cajas de texto una función que mostrará un mensaje de alerta al darles un clic, pero también ejecutarás a la función aplicar cuando crees una nueva caja de texto, así ésta también se verá afectada.

Saludos

Cambron · #6 (**permalink**) 17/07/2014, 11:11

Muchisimas gracias Alexis 88.. No tenia ni la mas minima idea de que se tendria que hacer asi.. Gracias :)

summerblack · #7 (**permalink**) 17/07/2014, 15:34

hola, tambien puedes usar la funcion addEventListener('click', funcion, true); a cada uno de los botones ya sea recorriendolos con un for o con el uso de la funcion each de underscore.js

es solo otra forma