JQuery no encuentra donde mostrar el nuevo contenido, porque no tienes un elemento con ID yoVisor
.
Además, el punto para especificar clases aplica solo en selectores CSS, no en atributos de etiquetas; sobra el punto en <div class=".ver" data-target="#yoVisor" href="Emma.html">
y en <div class=".viendo"></div>
, debiendo ser solo class="ver"
o class="viendo"
Si el clic se hace en:
<div class="ver" data-target="#yoVisor" href="Emma.html">
Según lo que tienes en esta línea:
$($(this).attr("data-target") + ".viendo").load($(this).attr("href"));
El selector es #yoVisor.viendo
, por lo que el elemento destino debe tener ID y clase:
<div id="yoViendo" class="viendo"></div>
Pero, como los ID son únicos, está de sobra crear el selector con ID y clase, es suficiente solo con ID:
$($(this).attr("data-target")).load($(this).attr("href"));
Omití la función (segundo parámetro de load
) porque no estás ejecutando alguna acción. En caso de querer aplicar algún efecto, entonces sí es necesario agregar la función que va a ejecutarse cuando se complete la carga.
$('.ver').on('click', function(ev) {
ev.preventDefault();
// Ocultar elemento antes de cargar
$($(this).attr("data-target")).fadeOut();
$($(this).attr("data-target")).load($(this).attr("href"), function() {
// Mostrar al finalizar la carga de nuevo contenido
$($(this).attr("data-target")).fadeIn();
});
});
Nota: $.click() es la forma corta de asignar eventos y se prefiere el uso de $.on().