插件加载不出来答案

【问题标题】：Plug in does not load插件加载不出来
【发布时间】：2013-02-22 12:55:15
【问题描述】：

为什么我的插件无法加载？引用了 jquery 和插件链接。该插件被称为.. .. 请帮助我找到我在代码中缺少的内容。

 <script src="~/Scripts/jquery-1.7.1.js"></script>
  <script src="~/Scripts/chosen.jquery.js"></script>


  <select class="chzn-select" tabindex="1" style="width:350px;" data- 
    placeholder="Choose a Country">
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="United Kingdom">United Kingdom</option> 
      <option value="Afghanistan">Afghanistan</option> 
      <option value="Albania">Albania</option>                
   </select>

   <script>

   $(document).ready(function(){
       $(".chzn-select").chosen();
   });

   </script>

我收到了萤火虫错误：

TypeError: $(...).chosen 不是函数

【问题讨论】：

检查网页是否可以访问 selected.jquery.js ！
是否有可以测试的实时网址？该问题显然与不正确的目录路径有关。
伙计们，如果你想看看 OP 发布的代码 sn-p，你会看到 .chosen 在 $(document).ready(); 中被调用。这意味着该函数将仅在包含 jQuery 后运行。所以在 jQuery 之前包含 ~ 或 .chosen 不是问题。
您是否在任何框架或 CMS 上使用它？

标签： jquery .net jquery-plugins javascript

【解决方案1】：

阅读 cmets 并搜索相关问题，我发现原因是因为 jQuery 被包含两次。看this。

我创建了这个fiddle，我从中选择了这个cdn service。

如果 jquery 只包含一次而不是

$(".chzn-select").chosen();

应该可以正常工作。

编辑：

而不是使用

$(document).ready(function(){
    $(".chzn-select").chosen();
});

试试

$(document).bind("pageinit", function() {
    $(".chzn-select").chosen();
});

【讨论】：

我在 firebug html 中看到，它看起来像
@Ohark 您是在head 或body 中加载脚本吗？是否有任何其他脚本加载两次或仅加载 jquery？请尝试我在答案中编辑的代码。
我的试用页面有问题。我将所有内容移至现有应用程序页面，现在一切正常。谢谢你的时间。看来我之前有订单和错位问题。

【解决方案2】：

您的 jquery 和/或选择的插件似乎没有加载。

尝试将它们替换为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/chosen.jquery.js" type="text/javascript"></script>

另外，通过从您的来源打开网址，确保确实包含chosen.jquery.js。或者在 firebug 或任何其他开发人员控制台中检查您的网络选项卡。如果显示 404，则说明您的脚本位置不正确。

还要确保你的页面布局是这样的

<html>
    <head>
        <!-- your css files -->
        <link/>
    </head>
<body>
    <!-- Your html above javascript includes-->
    <select>
    ....
    </select>
    <!-- Inlcude your js files at the bottom -->
    <script src="bla.js" />
    <script>
        //your inline javascript goes below includes

    </script>
</body>

【讨论】：

【解决方案3】：

不要在您的 html (aspx) 中使用 ~。您只能在代码隐藏中使用它。只需改用/scripts。

【讨论】：

删除了那个。但在萤火虫中仍然出现同样的错误。 TypeError: $(...).chosen 不是函数
在控制台中检查它是否可以正常加载两个脚本。
你是否使用 firebug 来分析网络，你应该看到两个脚本都加载了。如果他们看不到，你会看到错误代码
在 Firebug Net 配置文件中，我看到了这个顺序.. 获取本地主机，获取站点，获取modernizr，获取 jquery 1.7，获取 selected.jquery，获取 heroaccent.png，获取 jquery 1.7 - 我看到双重加载列表中的 Jquery1.7 .. 这可能是问题.. 不知道这是怎么发生的。

【解决方案4】：

我认为 Archer 指出了正确的问题，但我对解决方案有另一个建议：使用 RegisterClientScriptInclude (example)

public void Page_Load()
{
    var pageType = this.GetType();
    ClientScriptManager cs = Page.ClientScript;

    if (!cs.IsClientScriptIncludeRegistered(pageType, "jQuery"))
        cs.RegisterClientScriptInclude(pageType, "jQuery", ResolveClientUrl("~/Scripts/jquery-1.7.1.js"));
    if (!cs.IsClientScriptIncludeRegistered(pageType, "jQuery.chosen"))
        cs.RegisterClientScriptInclude(pageType, "jQuery.chosen", ResolveClientUrl("~/Scripts/chosen.jquery.js"));
}

这会将脚本标签放置在您的页面标题元素中，这意味着您可以删除页面本身的引用。它主要用于避免在未知虚拟目录位置（在开发环境中通常是您的开发 Web 服务器下的目录）下托管时出现问题。

【讨论】：

【解决方案5】：

这是因为您的 chosen.jquery.js 在 JQuery 尝试检查您的路径之前加载，如果您使用简单的将 Js 文件从您的文件夹拖放到您的页面，那么您不必担心 ~

【讨论】：