jQuery 中的 Uncaught TypeError 是否来自代码冲突？

Question

Tumblr 的 login page 是许多人的灵感来源，作为一名业余开发者，我希望了解他们是如何制作登录表单的。我去掉了多余的代码，想出了一个简化的版本，如下所示：

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