Noobie Jquery Question - Pourquoi ce simple script ne fonctionne-t-il pas?

Question

J'apprends JQuery et moi avons écrit un simple script externe AJAX pour ma page d'accueil qui tente de charger quelques balises statiques à partir d'un fichier HTML séparé et l'insérer dans ma page d'accueil quand je passe la souris sur un lien ...

$(function() 
{ 
    $('a#contact_link').hover(function() 
    { 
     alert('test1'); 
     $('<div id="contact_container">').load('contact.htm #contact', function() 
     { 
      alert('test2'); 
      /*$(this) + '</div>'; 
      $(this).hide() 
       .insertAfter('#header') 
       .slideDown(1000) */ 
     }); 

     return false; 
    }); 
}); 

à ce stade, j'essaie simplement d'afficher la boîte d'alerte 'test2', c'est pourquoi j'ai le code ci-dessous qui a été commenté. Actuellement, la case d'alerte 'test1' est la seule qui s'affiche, ce qui signifie que la ligne d'alerte 'test2' ne sera jamais touchée. tes pensées?

est ici l'extrait de code de mon fichier contact.htm ...

<div id="contact_container"> 
    <div id="contact"> 
     <p> 
     <strong>NAME</strong>: My Name<br/> 
     <strong>EMAIL</strong>: My Email<br/> 
     <strong>SKYPE</strong>: My Skype Handle<br/> 
     <strong>ADDRESS</strong>: My Address<br/> 
     </p>   
    </div><!--end contact--> 
</div><!--end contact_container--> 

merci beaucoup d'avance pour votre aide!

Answer 1

Vous appeliez .load de $ en utilisant la syntaxe de sélection incorrecte, un sélecteur est pas une chaîne HTML, il doit être conforme aux règles de syntaxe définies par le jQuery Selectors manual:

$('a#contact_link').hover(function() 
    { 
     alert('test1'); 
     $('div#contact_container').load('contact.htm #contact', function() 
     { 
      alert('test2'); 
      /*$(this) + '</div>'; 
      $(this).hide() 
       .insertAfter('#header') 
       .slideDown(1000) */ 
     }); 

     return false; 
    }); 

Answer 2

Le sélecteur est probablement la cause.

$(function() 
{ 
    $('a#contact_link').hover(function() 
    { 
     alert('test1'); 
     $('#contact_container').load('contact.htm', function() 
     { 
      alert('test2'); 
      /*$(this) + '</div>'; 
      $(this).hide() 
       .insertAfter('#header') 
       .slideDown(1000) */ 
     }); 

     return false; 
    }); 
}); 

Answer 3

Je crois que votre sélecteur #contact_container n'est pas tout à fait kasher. Consultez le sélecteur doco (http://docs.jquery.com/Selectors) sur le site JQuery. Je pense que quelque chose comme ça pourrait être un peu mieux:

$(function() 
{ 
$('a#contact_link').hover(function() 
{ 
    alert('test1'); 
    $('#contact_container').load('contact.htm #contact', function() 
    { 
     alert('test2'); 
     /*$(this) + '</div>'; 
     $(this).hide() 
      .insertAfter('#header') 
      .slideDown(1000) */ 
    }); 

    return false; 
}); 
});