插件无法加载

Question

插件无法加载

5

为什么我的插件没有加载？已经引用了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>

我遇到了Firebug错误：

TypeError: $(...).chosen不是一个函数。

- EP2012

检查页面是否可以访问chosen.jquery.js！ - Mandeep Pasbola

1

еҰӮжһңдҪ д»¬иғҪеӨҹзңӢдёҖдёӢеҺҹеё–дёӯеҸ‘еёғзҡ„д»Јз ҒзүҮж®өпјҢдҪ дјҡеҸ‘зҺ°.chosenжҳҜеңЁ$(document).ready();еҶ…йғЁиў«и°ғз”Ёзҡ„гҖӮиҝҷж„Ҹе‘ізқҖиҜҘеҮҪж•°еҸӘжңүеңЁjQueryеҠ иҪҪеҗҺжүҚдјҡиҝҗиЎҢгҖӮеӣ жӯӨпјҢ~жҲ–.chosenеңЁjQueryд№ӢеүҚиў«еҢ…еҗ«е№¶дёҚжҳҜй—®йўҳжүҖеңЁгҖӮ - Jehanzeb.Malik

你在使用任何框架或CMS吗？ - Jehanzeb.Malik

项目基于MVC，但在HTML中这并不重要。 - EP2012

我问这个问题是因为有一个关于rubyonrails的已报告问题。请检查我的答案在底部。它可能会对你有所帮助。 - Jehanzeb.Malik

显示剩余2条评论

5个回答

2

您的jQuery和/或chosen插件似乎没有加载。

请尝试将它们替换为：

<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，方法是通过打开源代码中的URL或查看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>

- Timmetje

1

不要在HTML（aspx）中使用~，这只在代码后端中使用。直接使用/scripts。

- Reinstate Monica Cellio

已经删除了那个。但是在 Firebug 中仍然得到相同的错误。TypeError: $(...).chosen 不是一个函数。 - EP2012

在控制台中检查两个脚本是否都已经正确加载。 - Reinstate Monica Cellio

你使用过Firebug来分析网络性能吗？如果可以的话，你应该看到两个脚本都已经加载。如果不能，你会看到一个错误代码。 - Hawxby

在Firebug的网络分析中，我看到了这个顺序：getlocalhost、get site、get modernizr、get jquery 1.7、get chosen.jquery、get heroaccent.png、get jquery 1.7。从列表中我看到了jquery1.7被重复加载了两次...不确定是怎么发生的，这可能是问题所在吗？ - EP2012

1

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

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服务器下的目录）。

- Codesleuth

0

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

- coder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jehanzeb.Malik · Accepted Answer

阅读评论并搜索相关问题，我发现问题的原因是jQuery被包含了两次。请查看此链接。

我创建了这个fiddle示例，在其中我从CDN服务中包含chosen。

如果只包含一次jQuery，则...

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

should work fine.

EDIT:

Instead of using

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

尝试

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