javascript no se carga en capa dinámica. Por qué?

[TorKilah]

Buenas!! Bueno, antes que nada, gracias por vuestro tiempo y, antes de preguntar aquí he googleado mucho. Solo que yo no soy programador, estoy aprendiendo por mi cuenta, y sobre lo que de momento he encontrado, hablan demasiado técnicamente para mis niveles. Jejeje, ahora, al lío:

Parte A - La cuestión es que tengo un index.php, y en esa página tengo una función con Ajax, que llama a otra página php (registro.php) dentro de una capa css (.contenedor) haciendo click a un botón (funciona)

Parte B - En el formulario de registro aplico un script para falidar el e-mail tal que así: (también funciona sin problemas. PERO SOLO EJECUTANDOLO EN REGISTRO.PHP)

Código (javascript) [Seleccionar] Expandir


<script type="text/javascript">
  var f20 = new LiveValidation('#f20');
         f20.validate( Validate.Email );
</script>


Parte C y problema en cuestión... Cuando en el index.php le doy click al botón, se carga dinámicamente el formulario de registro.php en el div.contenedor, peeeero... no funciona el script que valida el e-mail...:

He pensado que lo más probable es que sea alguna incompatibilidad... como que el script que se carga en registro.php se esté pegando con otro que haya en index.php pero no sabría por donde buscar... :S, tengo la última libreria jQuery-1.8.2

He probado también de cargar la librería del script del validador en el index... no se por que... supongo que por barajar posibilidades, ya os he dicho que no tengo ni papa... voy haciendo chino chano, hehe.

Este es el script que utilizo en el index.php para que se cargue registro.php dinámicamente.

Código (javascript) [Seleccionar] Expandir


<script type="text/javascript"">
var obj;

function generaPeticion(url) {
if (window.XMLHttpRequest) {
    // Obtener un nuevo objeto
    obj = new XMLHttpRequest();
    // Indicar la funcion de retorno
    obj.onreadystatechange = procesaRespuesta;
    // Método  GET con la url; "true" para asincronica
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
 
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = procesaRespuesta;
      obj.open("GET", url, true);
      obj.send();
    }
  } else {
    alert("Su navegador no soporta AJAX");
  }
}

function procesaRespuesta() {

    if (obj.readyState == 4) {
          document.getElementById('registros').innerHTML = obj.responseText;
    }
}
</script>


Si falta algún dato decidme por favor!! creo haber expuesto lo necesario!!

[TorKilah]

Al final lo solucioné de otra manera.

Para el que se vea en mi situación, por lo menos ya tiene una forma preventiva de salir del apuro, hehehe.

Buscando, buscando, buscando y buscando, he ido leyendo cosas sobre la función .live() y que está desfasada, que no es muy recomendable y tal... entonces pensé... en la página b.php funciona bien el script, cuando cargo la página b.php en la a.php no se carga el script... omg...

Como lo podría hacer? pues bien, deduje que podría haber alguna manera de llamar a un script dinámicamente haciendo algún evento sobre algún objeto... y efectivamente, buscando más encontré la manera de hacer esto:

Siendo #registros la capa .css donde quiero cargar el formulario de la página b.php

Código (javascript) [Seleccionar] Expandir


  $('#registros').click(function ()
      {
        $.getScript("js/livval.js", function (data, estado)
      {
           if (estado == 'success')
           {
              var f20 = new LiveValidation('f20');
              f20.add( Validate.Email );
           }
           else
       {
          alert("Error. Inténtalo de nuevo");
           }
      });
      });


Que os parece?? creéis que habría alguna forma mejor de ejecutar este concepto? (seguro que la hay)