Comment charger du contenu dynamique avec jQuery?

Question

Je suis "How to Load In and Animate Content with jQuery" et tout fonctionne bien, mais si j'ai d'autres liens dans le <div/> chargé le script ne fonctionne pas. Quelqu'un peut-il repérer le bug dans le code suivant?

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('.nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content'; 
      $('#content').load(toLoad) 
     }           
    }); 

    $('.nav li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content'; 
     $('#content').hide('fast',loadContent); 
     $('#load').remove(); 
     $('#wrapper').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#content').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#content').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

}); 

Mon scénario

• début de l'index du site
• cliquez sur 'contact'
• contact 'div contenu' est chargé
• dans div contact contenu Je autre lien « carte. html 'Je veux l'ouvrir le même à l'autre, seulement' contenu div 'chargement -> et cela ne fonctionne pas - le site est en cours de chargement

Answer 1

Si le lien dans le contenu dont vous parlez est le lien .nav li a, le problème ici est que l'événement .click est affecté une seule fois (sur documentready) et n'affecte pas le contenu chargé après documentready.

Ainsi, la façon la plus simple serait en train de changer $('.nav li a').click(function(){ à

$('.nav li a').on('click', function(){ 

Avec ce gestionnaire d'événements sera joint au contenu chargé plus tard aussi.

---

Note: En fonction de votre version de jQuery vous pouvez avoir à utiliser une autre méthode pour cette .live Comportement:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+