jQuery extiende las funciones de jquery al contenido cargado dinámicamente
Estoy teniendo problemas para llamar a las funciones de jQuery después de reemplazar el contenido de un div utilizando .html () y el método .on (). Después de haber visitado muchas páginas, estoy seguro de que el problema se debe al usar el método .on () de forma incorrecta, pero no puedo averiguar qué está mal. El problema es que el control deslizante de la interfaz de usuario jQuery no funciona después de cargar el contenido html. Creo que la solución podría ser bastante simple, pero simplemente no puedo encontrar la respuesta correcta mientras hay cientos de personas con un problema similar.
Estoy usando un elemento div como cuerpo para mostrar el contenido de otros elementos div.
<body>
<a href="#" content="#div1">load content</a>
<div id="body">static content with working UI slider
<div class="slider"></div>
</div>
<div id="div1">loaded content where the UI slider is not working
<div class="slider"></div>
</div>
</body>
Utilizo este código jQuery para cargar dinámicamente el contenido html (y el control deslizante)
$(".slider").slider();
$("body").on("click", "a", function(event) {
event.preventDefault();
var htmlContent = $($(this).attr("content")).html();
$("div#body").html(htmlContent);
});
El código se puede encontrar en:http://jsfiddle.net/zTRFj/1/