entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

problemas con el evento click de jquery?

Hola a todos tengo el siguiente problema, estoy creando una tabla y para agregarle las filas lo hago dinamicamente en dicha tabla,es decir creo campos de tetos editables y un boton para agregar la fila, hasta ahi todo bien el problema esta cuando le doy al boton editar la fila q la edito y le voy a dar clic al boton agregar este no hace nada, pierde el evento clic que le cree a dicho boton. si alguien pudiera ayudarme lo agradecería.

2votos

Leonardo-Tadei comentado

Hola @omir,

sin ver el código, es casi imposible saber por qué no se ejecuta el evento clic... subí a algún lugar esa pantalla para que podamos verla funcionando.

4 Respuestas

2votos

angelAparicio Puntos2810

Normalmente jQuery asocia los eventos al terminar la carga de la página (el document.ready ).

Si creas elementos nuevos después de ejecutar el document.ready estos no tendrán los eventos asociados. Tendrás que asociarlos de nuevo.

Ejemplo, si tienes este código:

$(document).ready(function() {

  $('.boton').click( function(){
    //hacer algo
  });

  $('.boton2').click( function(){
    //Crear un elemento del tipo .boton
  });
};

El elemento .boton que creas en la segunda función no tendrá asociado el efecto del clic declarado antes. Así que tendrías que tener algo así:

$(document).ready(function() {

  $('.boton').click( function(){
    miFuncion();
  });

  $('.boton2').click( function(){
    var nuevoBoton = crearNuevoBoton();
    nuevoBoton.click( function(){ miFuncion } );
  });
};

Supongo que tu problema irá en esta linea.

1voto

manuel26892 Puntos1360

Hola, te paso un código de un ejercicio que hice para poner en práctica JQuery, consiste en crear una tabla donde le indicas el número de filas y columnas y le pones colores a las filas pares e impares, no tiene función de agregar, es decir, cada vez que cambies los valores lo que hace es eliminar la tabla existente y crear la nueva, aunque la función agregar se la podrías crear modificando el código es bien fácil, no obstante si te atrancas pregunta igualmente. Incluyo HTML, CSS y JQuery.

<!DOCTYPE html>
<html lang="es">

    <head>
        <meta charset="utf-8">
        <title> Ejercicio3</title>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script src="jquery.js" type="text/javascript"></script>        
        <link href="EstiloEjercicio2.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="titulo">
            Ejercicio3
            <hr size=3 id="linea" color=#ABC9>
        </div>
        <div id=Formulario>

            <div>
                <label for=filas>Filas:</label>
                <input type="number" id="filas" min=1 max=10>
            </div>
            <div>
                <label for=columnas>Columnas:</label>
                <input type="number" id="columnas" min=1 max=10>
            </div>
            <div>
                <label for="colorPares">Color Filas Pares:</label>
                <input type="color" id="colorPares">
            </div>
            <div>
                <label for="colorImpares">Color Filas Impares</label>
                <input type="color" id="colorImpares">
            </div>
            <div>
                <input type="button" id="aceptar" value="aceptar">
            </div>

        </div>
        <div id="tabla">

        </div>
    </body>

</html>

/* CSS Document */
body{
    background-color:#fff6f1;
    font-family:"Helvetica Arial";
    width:960px;
}

#titulo {
    color:#990099;
    font-size:2em;
    font-weight:bold;
    text-align:center;
}
#linea{
    color:#990099;
}
div {
  margin: .4em 0;
}
div label {
  width: 15%;
  float: left;
}
.estiloTabla {
    border-width:1px;
    border-style: solid;

}
td {
    width: 30px;
    height:20px;
    margin: 0px;
    padding: 0px;
}
ol li{
    list-style:none;
}

$(document).ready(function(){
    $("#aceptar").click(crear);

    function crear(){
        var colorPar = $("#colorPares").val();
        var colorImpar = $("#colorImpares").val();
        var filas = $("#filas").val();
        var columnas = $("#columnas").val();
        if (colorPar == "" || colorImpar == "" || filas == "" || columnas == "") {
            window.alert("No puede estar ningun campo sin valor");
        }else{
            $("table").remove();
            $("#tabla").append("<table></table>");
            for (var f = 0; f < filas; f++) {
                $("table").append("<tr></tr>");
                for(var c=0; c < columnas; c++){
                    if (f%2==0) {
                        $("tr:last-child").append("<td></td>");
                        $("tr:last-child td:last-child").css("background-color", colorImpar);                       
                    }else{
                        $("tr:last-child").append("<td></td>");
                        $("tr:last-child td:last-child").css("background-color", colorPar);
                    }
                }
            };
        }

    }
});

2votos

cobasESP Puntos19650

El problema es sencillo, si tu tienes un boton con una id, y llamas al evento click de ese boton, funciona, pero... si tienes un evento para un botón que no existe al iniciar la página y lo creas luego dinámicamente.... este no funciona, en la función en la que vuelves visible el botón, o haces aparecer el botón debes tambien meter el capturador de evento onclick, para que funcione correctamente, si no, estas creando un listener para un evento, que apunta a un elemento que no existe con lo cual ya no funcionará.

0voto

manuel26892 comentado

@cobasESP así es, crear un evento a un elemento que no existe lógicamente no va a funcionar, primeramente crear el elemento y después asignarle el evento (programación estructurada).

1voto

Noé Andrés Puntos210

este problema a mi me pasaba, yo lo solucione colocando esto

$(document).on('click','#id',function(){

});

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta