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

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>