Tengo un archivo llamado main.html que contiene varios div, cada uno con 2 clases: el primero es su clase específica, el segundo es una clase llamada menu-item que uso para determinar si se activará un evento cuando se haga clic en él.
El archivo contiene esto:
<div id="load-here"> </div> <div class="item-1 menu-item"> click this </div> También tengo un archivo gallery.html que quiero cargar en el archivo main.html en el div #load-here , y digamos que contiene esto:
<div class="menu-item> <!-- some image here --> <img href="img/1.jpg /> </div>El script que tengo es este:
$(document).ready(function() { $( "div" ).click(function() { if ( $( this ).hasClass( "menu-item" ) ) { $("#load-here").load("gallery.html" + this.class); } }); }); El problema: no funciona. He probado varios cambios. De alguna manera no se está cargando en el div #load-here
Echa un vistazo a esto: http://api.jquery.com/load/
$( "#b" ).load( "article.html #target" );Parece que hay varios problemas:
$( "div" ).click(function() ... está registrando el clic en todos los div s disponibles. Esto podría causar un comportamiento extraño. Mejor uso: $("div.menu-item").click( ...this te está engañando, ya que el contexto de la llamada puede ser diferente. Las cosas son más claras si maneja el evento como un parámetro explícito y verifica el objetivo del evento..class . Pero, en el DOM hay un .className . Mejor intente usar jQuery $().attr('class') . Además, el parámetro necesita un separador: gallery.html?parameterPara resumir, aquí mi sugerencia:
$("div.menu-item").click( function(event) { var jqTarget = $(event.target).closest('.menu-item'); if ( jqTarget.hasClass( "menu-item" ) ) { $("#load-here").load("gallery.html" + "?" + this.class); } }); closest() intentará encontrar el elemento coincidente más cercano, en caso de que el objetivo del clic no esté en el div en sí, sino en un img secundario o de otra manera. Por lo tanto, la condición en la sugerencia debe usarse para obtener información más específica sobre qué elemento del menú se hizo clic: if ( jqTarget.hasClass( "that-specific-item" ) ...