jQuery에서 Uncaught TypeError가 코드 충돌로 인해 발생합니까?

Question

Tumblr의 login page은 많은 사람들에게 영감을주었습니다. 애호가 개발자로서 나는 로그인 양식을 어떻게 작성했는지보고 싶었습니다. 그래서 같은 불필요한 코드를 멀리했다 및 단순화 된 버전 함께했다 : 나는, 나는 그들의 좋은 효과를 얻기 위해 다음과 같은 사용하여 시도 다른 페이지에 jQuery를 1.3를 사용할 때

<div id="login_form_container"> 
    <form method="post" action="logged-in.html" id="login_form"> 
     <div class="input_wrapper"> 
      <label for="login_email">Email address</label> 
      <input type="text" name="email" id="login_email" value=""> 
     </div> 
     <button type="submit"><span>Log In</span></button> 
    </form> 
</div> 

가보고. 그것은 아니다 확실히 그들은 그것을 가지고 있지만, 매우 단순화 된 버전은 어떻게이 페이지에 코드 만 인 경우

<script> 
$("input#login_email").click(function() { 
    $(".input_wrapper").addClass("blurred filled"); 
}); 

$("input#login_email").blur(function() { 
    $(".input_wrapper").removeClass("blurred"); 
}); 
</script> 

이 좋은 멋쟁이 작동하지만, 내가 jQuery를 다른 비트 페이지에 넣을 때,

Uncaught TypeError: Cannot call method 'click' of null 
    (anonymous function) 

크롬, 파이어 폭스 또는 사파리와 동일하므로 분명히 제 코드입니다.

문제가 무엇인지 아는 사람이 있습니까?

• 페이지의 다른 곳에서 충돌하는 jQuery 참조가 원인 일 가능성이 있습니까?
• 더 확실한가요?
• 함수 이름을 지정하지 않았기 때문입니까?

코드가 격리되어 작동하지만 페이지의 다른 요소와 결합 될 때 왜 나는 당황합니다. 이것은 나를 곤란하게 만든다.

Answer 1

이

<script src="jquery.js"></script> 
<script type='text/javascript'> 

jQuery.noConflict(); 
jQuery("input#login_email").click(function() { 
    jQuery(".input_wrapper").addClass("blurred filled"); 
}); 

jQuery("input#login_email").blur(function() { 
    jQuery(".input_wrapper").removeClass("blurred"); 
}); 
</script>