Javascript 函数仅适用于页面，不适用于文件答案

【问题标题】：Javascript function works only from page, not from fileJavascript 函数仅适用于页面，不适用于文件
【发布时间】：2013-07-08 21:55:16
【问题描述】：

你好！

我在 extern js 文件中声明函数：

$(function () {
        $('[data-provide=typeahead]').each(function () {
            var self = $(this);
            self.typeahead({
                source: function (term, process) {
                    var url = self.data('url');
                    console.log(url);

                    return $.getJSON(url, { term: term }, function (data) {
                        return process(data);
                    });
                }
            });
        });
    });

但它不起作用。进入函数后，不会继续绕过内容。

部分母版页上的链接：

...
<script src="~/Scripts/Login.js?v.3.0"></script>
... 
<div class="container">
        @RenderBody()
</div>
...

只有当我将此代码直接放在页面上时它才会开始工作。

有什么问题？

谢谢！

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

你不能在客户端使用~，这是一个ASP特有的功能，只有在你使用<script runat="server">时才有效

<script src="~/Scripts/Login.js?v.3.0"></script>

很可能你给了它错误的路径。查看您的网络选项卡并确保对该脚本的请求有效

试试

<script src="/Scripts/Login.js?v.3.0"></script>

见slash(/) vs tilde slash (~/) in style sheet path in asp.net

【讨论】：

但是debug节点是js文件和函数，我直接在onclick之类的标签里指定的。
“试过了，不起作用”是一个糟糕的评论。您是否查看了网络选项卡，该页面实际上是否找到了脚本？ 99% 的可能性不是，你只需要给它正确的路径。做一些挖掘并向我们展示它是如何不起作用的，浏览器试图获取的实际解析的 URL 是什么？托管脚本的页面的 URL 是什么？脚本的实际位置是什么？这么多问题你没有回答...
Scripts/Login.js - 真实的地方。正如你在照片上看到的，浏览器看到了文件，它甚至允许第一个断点工作。
@SergeyShoshin 对不起，“Script/Login.js”不是真正的路径，它是一个相对路径。我在询问实际的绝对 URL，例如 server/appname/Scripts/Login.js。我们还需要知道承载 JS 的 HTML 文件的完整 URL。您可以上传您的代码以便我们观察这种行为吗？从您提供给我们的信息中很难猜到。检查自动完成用于 AJAX 的 url 在两种情况下是否相同，代码是否进入第 32 行？
请将所有信息添加到问题本身（脚本的完整路径，HTML 文件的完整路径），是否命中第 32 行，以及 AJAX 请求的 URL 是否相同。您能做的最好的事情就是在我们可以实际运行您的代码的地方复制问题

【解决方案2】：

我解决了这个问题。尽管如此，胡安·门德斯是对的。问题出在脚本文件的链接中。代替 <script src ....>...</script>

我正在创建bundling

1) 在 App_Start 文件夹中创建 BundleConfig.cs 文件，代码如下：

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-*"));

            bundles.Add(new ScriptBundle("~/bundles/login").Include(
                        "~/Scripts/Login.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrapJS").Include(
                        "~/Scripts/bootstrap*"));

            bundles.Add(new StyleBundle("~/bundles/ProfitStyle")
                            .Include("~/Content/ProfitStyle.css"));

            bundles.Add(new StyleBundle("~/bundles/bootstrapCSS")
                            .Include("~/Content/bootstrap*"));
        }
    }

在这里，我们在内容文件上注册了捆绑包。

2) 在 Global.asax 中创建初始化包，添加代码行：

BundleConfig.RegisterBundles(BundleTable.Bundles);

3) 并且刚刚添加了指向我们需要的文件的链接：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/login")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/bundles/bootstrapCSS")
@Styles.Render("~/bundles/ProfitStyle")

对不起，胡安

【讨论】：

【解决方案3】：

并且，与其他情况一样，只需在视图页面中编写此代码：

<script src="@Url.Content("~/Scripts/Login.js?v.3.0")"></script>

【讨论】：