Foros del Web - Ver Mensaje Individual

lubtufano · #5 (**permalink**) 28/07/2015, 11:13

Cita:

Pero a lo que me refiero es que deseo hacer codigo limpio, es decir el codigo js lo tengo en archivos y no mezclado con el html.

No necesitas mezclar código, mira este ejemplo.

escuchadores.html

Código HTML:

Ver original<html>
 
<head>
    <title>titulo</title>
    <script type="text/javascript" src="escuchadores.js"></script>
</head>
 
<body>
    <input type="button" value="crear nuevo elemento" id="boton1">
    <br>
    <input type="button" value="mostrar alert" class="botonAlert">
    <input type="button" value="mostrar alert" class="botonAlert">
    <p id="parrafo"></p>
</body>
 
</html>

escuchadores.js

Código Javascript:

Ver originalwindow.addEventListener('load', asignarEscuchadores, false);
 
function asignarEscuchadores() {
    document.getElementById('boton1').addEventListener('click', creaBoton, false);
    
    var botones= document.getElementsByClassName('botonAlert');
    for(i=0; i<botones.length; i++) {
        botones[i].addEventListener('click', verAlert, false);
    }
}
 
function creaBoton() {
    document.getElementById('parrafo').innerHTML= document.getElementById('parrafo').innerHTML + '<input type="button" value="boton nuevo" class="botonAlert">'
    
        //se asigna el manejador a los nuevos elementos
    var inputs= document.getElementById('parrafo').getElementsByTagName('input');
    for(i=0; i<inputs.length; i++) {
        inputs[i].addEventListener('click', verAlert, false);
    }
}
 
function verAlert() {
    alert('Has pinchado un boton');
}

Al tratarse de ajax creo que lo más adecuado es asignar los manejadores de eventos a los nuevos elementos en la misma función que se ejecuta al suceder el evento onreadystatechage.