jquery page charger pour obtenir un autre contenu de la page, mouseover comment charger une fois

Question

J'ai quelques pages, comme a1.html, a2.html, a3.html, a4.html, a5.html .... Toutes les pages HTML Markup ressemble

<div class="wrap"> <header>Header 2</header> <saection>Section 2</section> <footer> <div class="hover"></div> </footer> </div>

donc quand onhover a1.html classe .hover, puis chargement de la page a2.html .wrap et le corps de appendTo a1.html, sur la même page, nous avons maintenant le contenu de a2.html. lorsque le vol stationnaire a2.html 'de .hover »(toujours a1.html) charge alors le contenu de a3.html et ainsi de suite

$('.hover').on('mouseover', function(){ 
    $.get("/a2.html", function(data){ 
///a2.html should be a variable 

    $('section', data).appendTo('body'); 
    }); 
}); 

Ma question est de savoir comment charger juste a2.html, ou a3.html Contenu a4.html juste une fois quand onhover .hover classe. Comment puis-je tester si a2.html est déjà chargé, ne le chargez pas à nouveau? Merci

Answer 1

Essayez quelque chose comme ça.

$('.hover').on('mouseover', function(){ 
    if (!$(this).data('active')) { 
     $(this).data('active', true); 
     $.get("/a2.html", function(data){ 
     ///a2.html should be a variable 
      $('section', data).appendTo('body'); 
     }); 
    } 
}); 

Utilisation de l'ensemble de données pour stocker un drapeau (active ici), vous laissez la possibilité de le retirer plus tard et de traiter à nouveau les instructions du gestionnaire.

Si vous voulez vraiment le charger une fois (et jamais plus tard), remplacez on par one dans votre code (comme indiqué par @SSS).

$('.hover').one('mouseover', function(){ 
    $.get("/a2.html", function(data){ 
///a2.html should be a variable 

    $('section', data).appendTo('body'); 
    }); 
}); 

---

Attention: la façon dont vous utilisez on (ou one) lie l'événement mouseover uniquement sur éléments DOM existants.

Si vous voulez affecter tous éléments DOM existants et futurs. Vous devez l'utiliser de cette façon:

$('body').on('mouseover', '.hover', function(){ 
    /// your instructions 
}); 

Espérons que cela aidera.

Answer 2

La méthode la plus simple est $ (..). One (événement, handler). Mais que faire si vous avez vraiment besoin de faire quelque chose après avoir chargé une fois et une seule fois de manière asynchrone et promise?

J'ai mis en place une application cartes ui confrontée au même problème: carte définie dans un autre fichier html qui doit être chargé et seulement une fois avant de mettre à jour/afficher son contenu. Ma résolution est basée sur l'API jQuery Promises et un cache simple. Souhaitez utile et voici une partie de mon code (le vrai est beaucoup plus compliqué):

function expect(proc) { 
    var cache = {}; 
    return function(key) { 
     if (!cache[key]) { 
      cache[key] = $.Deferred(function(deferred) {proc(deferred, key); }) 
          .promise(); 
     } 
     return cache[key]; 
    }; 
} 

var cards = expect(function(deferred, url) { 
    var $loader = $('div'); 
    function whenDone() { 
     deferred.resolve(loader.contents()); 
    } 
    $loader.load(url).then(whenDone); 
}); 

cards('MyCard.html').done(function(contents) { 
    // It is promised that MyCard is loaded, do what you want here 
});