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

Posted 2023-03-05

【中文标题】jQuery 中的 Uncaught TypeError 是不是来自代码冲突？

【英文标题】：Does an Uncaught TypeError in jQuery come from code conflict?jQuery 中的 Uncaught TypeError 是否来自代码冲突？

【发布时间】：2011-06-05 06:01:53

【问题描述】：

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 引用冲突（都可以正常工作）？ 是不是更明显？ 是因为我没有给函数命名吗？

我很困惑为什么代码是独立工作的，但与页面中的其他元素结合时却不行。这让我很难过。

【问题讨论】：

原型也在你的页面上吗？

您说得对，先生。我自己做了一些寻找来隔离问题（请参阅我对第一个答案的评论），确实存在由 Scriptaculous.js 和 Prototype.js 引起的冲突 - 我该如何解决这个问题？

【参考方案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>

【讨论】：

你也可以这样做：var $j = jQuery.noConflict();这会将$j变量分配为新的jQuery函数，而不是普通的$。所以你可以做$j('input#login_email')

您还应该注意，您应该在导入任何其他框架之前导入 jQuery 框架。并在导入任何其他框架之前调用jQuery.noConflict() 函数。

& @dan 上面确实可以工作，因为它们允许我的登录表单正常工作，但它们似乎确实停止了其他所有工作。我还抛出以下错误：Uncaught TypeError: Property '$' of object [object DOMWindow] is not a functionprototype.js 和 controls.js（Scriptaculous 的一部分）都会发生这种情况听起来我的代码可能存在更大的问题，而这个问题只是强调这一点？嗯。感谢您的回复

我现在已经解决了这个问题。感谢您的 cmets 和 jQuery 文档 - docs.jquery.com/Using_jQuery_with_Other_Libraries - 我能够对此进行排序。因为我首先调用了 jQuery.js，所以不需要 jQuery.noConflict()。谢谢大家。