> Faqs > Cargar HTML con Ajax y jQuery y hacer disponibles los eventos declarados en el Javascript principal

Cargar HTML con Ajax y jQuery y hacer disponibles los eventos declarados en el Javascript principal

La idea de mi proyecto es que, cuando se haga click en una opción del menú, se cargue la página referenciada en un div del "index.php".

Lo estoy haciendo por medio de jQuery con la opción load. Hasta ahí todo bien.

Por otro lado, el archivo pricipal carga los archivos JS y CSS que necesita para su funcionamiento. Es aquí donde empieza el problema, ya que la página index.php, asmilia bien los eventos cargados, pero las paginas cargadas por medio de load al parecer no responden a los eventos declarados en el Javascript principal.

Incluso, cuando responde, me repite varias veces un mensaje de alerta que les puse a los js como prueba, que me indica que la pagina ha cargado con éxito. La primera vez cargo con el load la página desea sale una vez el mensaje, pero después a medida que la solicito nuevamente me duplica el alert.

  • ¿Como puedo solucionarlo?
  • ¿Habrá una forma donde cargue todos los archivos js y css en el index y tenga que volverlos a vincular en cada archivo php que cargaré cone load?

Agradezco la atención a la presente.

Gracias

Respuestas

El comportamiento que comentas es perfectamente normal. Los manejadores de eventos en principio se asignan a todos los elementos que están presentes en la página en el momento en el que se asignan. Si cargas contenido con Ajax ese contenido no está presente en la página cuando asocias los manejadores, por lo que simplemnte no se aplican los eventos donde tú necesitas.

Es como si fueras un camarero que quieres poner agua en todas las mesas donde hay clientes. Si más tarde aparecen nuevos clientes en mesas que estaban desocupadas, tendrás que ir y ponerles agua de nuevo.

Afortunadamente en jQuery hay un método que lo soluciona, que pone manejadores a todos los elementos de determinado selector, presentes o futuros. Es el método live(). Básicamente lo tienes que usar en lugar de on().

En este artículo te explican el método live de jQuery.

Espero haberte ayudado.

Santiago
561 18 44 21