jQuery插件没有加载？答案

【问题标题】：jQuery plugin not loading?jQuery插件没有加载？
【发布时间】：2010-12-21 15:45:38
【问题描述】：

我正在尝试使用 jQuery 的圆角演示 (http://plugins.jquery.com/project/corners)，但是当它尝试运行时，我在 Firefox 和 IE 中都遇到了错误。

下面的代码显示了我正在尝试做的事情，错误是'$(".Section").corners is not a function'。该页面肯定正在加载 jquery，但没有加载角插件。

有人知道为什么会报错吗？

<script src="../../Content/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Content/Scripts/jquery.corners.min.js" type="text/javascript"></script>   
<script type="text/javascript">
    $(document).ready(function () {
        $('.Section').corners();
    });
</script>

【问题讨论】：

你使用的是哪个角脚本？
您可以从浏览器访问corners.js 文件吗？

标签： jquery plugins

【解决方案1】：

使用 Firebug 中的 Net 面板（或等效的开发人员工具）并确保首先加载脚本。如果不是，您应该会在“网络”面板中看到它为其行项目返回 404 状态。

【讨论】：

corners 脚本和 jquery 脚本的 200 OK

【解决方案2】：

我已经浏览了您的代码，但没有发现问题所在。您可以在 $(document).ready 中尝试此代码并查看它返回的内容：

alert(typeof jQuery().corners)

如果它提醒“功能”，那么你知道角落正在加载。如果它警告“未定义”，那么它没有加载，您可以追踪该问题。

【讨论】：

【解决方案3】：

我创建了一个页面来加载 jQuery Corners，看看我是否可以让它工作：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .Section {
        border-color: #000;
        border-width: medium;
        border-style: solid;
    }
    </style>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.corners.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.Section').corners();
        });
    </script>
    <title>Corners</title>
    </head>

    <body>
    <p class="Section">
    Here is some text in my soon to be rounded corner paragraph.
    </p>
    </body>
    </html>

我在测试中发现 Corners 插件已加载，但使用 jQuery 1.4.4 并使用 Chrome 8.0.552.224、Safari 5.0.3、Firefox 3.6.13 和 Internet Explorer 8 进行测试，只有 Safari 和 Fireefox 显示角落。 Chrome 在控制台中产生 CSS 错误，IE 只是忽略了 JavaScript。考虑到这一点，我建议您提供 CSS3 PIE a try for IE 并为您的其他元素使用一些组合 CSS：

<style type="text/css">
.Section {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}       
</style>

上面的 CSS 来自 in a blog post by Jon Raasch 的示例。

【讨论】：

我无法弄清楚为什么角脚本不起作用，但我能够在 FF 和 IE 中让它工作。非常感谢！
@DLeh 你能得到什么工作？这个答案中提到的 Jquery 插件或角落？

【解决方案4】：

我使用的是同一个库并且遇到了同样的问题，我所做的是。

在您的 document.ready 代码之前复制粘贴 corner.js 库的整个代码并检查它是否开始工作？

如果不是意味着corner.js应该重新下载。

【讨论】：

【解决方案5】：

应该是$('.Section').corner(); 而不是$('.Section').corners()

这仅适用于您使用“jQuery 角插件”

【讨论】：