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>

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

1 个答案: