jQuery 中未捕获的类型错误是否来自代码冲突？

Question

Tumblr 的登录页面给许多人带来了灵感，作为一名业余开发者，我一直想看看他们是如何制作自己的登录表格。我去掉了多余的代码并提出了一个简化的版本，如下所示：

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

看到我在其他页面上使用 jQuery 1.3，我尝试使用以下内容来获得良好的效果。这并不完全是他们的方式，而是一个非常简化的版本：

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

：无论是 Chrome、Firefox 还是 Safari，都是一样的，所以这显然只是我的代码。

有谁知道问题是什么？

• 是否可能是由于页面其他地方的 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>