Does an Uncaught TypeError in jQuery come from code conflict?

Tumblr's login 开发者_Python百科page is an inspiration for many, and as a hobbyist developer I was looking to see how they made their login form. I took away the superfluous code and came up with a simplified version, like so:

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

Seeing as I use jQuery 1.3 on other pages, I tried using the following to get their nice effects. It's not quite how they have it, but a very simplified version:

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

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

This works nice and dandy when this is the only code on the page, but when I put it in a page with other bits of jQuery, it returns an error of:

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

It's the same whether Chrome, Firefox or Safari, so it's clearly just my code.

Does anyone know what the problem is?

• Is it likely to be due to conflicting jQuery references elsewhere in the page (which all work fine)?
• Is it something more obvious?
• Is it because I haven't named the functions?

I'm puzzled as to why the code works in isolation but not when combined with other elements in a page. This has me stumped.

---

Alter your script like this

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