Noobie Jquery 질문 - 왜이 간단한 스크립트가 작동하지 않습니까?

Question

나는 JQuery와 학습 그리고 난이 별도의 HTML 파일에서 약간의 정적 마크 업을로드하고 난 링크 위에 마우스를 올려 때 내 홈페이지에 삽입하려고 내 홈페이지에 대한 간단한 AJAX 외부 스크립트를 쓴 ...

$(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; 
    }); 
}); 

이 시점에서, 나는 단순히 'test2'경고 상자를 표시하려고하는데, 그 이유는 아래 주석 코드가 있기 때문입니다. 현재 'test1'알림 상자는 'test2'알림 줄이 결코 부딪치지 않는 것을 의미하는 유일한 상자입니다. 당신의 생각?

여기에 코드의 조각 내 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--> 

당신의 도움에 미리 너무 감사합니다! 당신은 잘못된 선택 구문을 사용하여 $의 .load를 호출했다

Answer 1

는, 셀렉터가 HTML 문자열이 아닌, 그것은 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

선택기 아마 원인이다.

$(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

귀하의 #contact_container 선택자가 매우 정결하지 않은 것으로 보입니다. JQuery 사이트에서 doco (http://docs.jquery.com/Selectors) 선택기를 확인하십시오. 이 같은 것이 조금 더 좋을 수도 있다고 생각합니다.

$(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; 
}); 
});