发布后 jQuery 不起作用答案

【问题标题】：jQuery isn't working after publish发布后 jQuery 不起作用
【发布时间】：2016-04-20 12:23:49
【问题描述】：

当我在本地测试我的 Web 应用程序时，我的 jQuery 工作正常。具体来说，我正在使用 auto-complete.. 但是，在我将应用程序发布到我的网络服务器之后.. 然后 auto-complete 不再起作用..

我在服务器上检查了我的应用程序发布到的文件夹，并检查了 jquery-ui 脚本以查看它是否包含 auto-complete 并且确实如此.

为什么会这样？如何让我的 jQuery 在我的服务器上运行？

我在开发者工具中没有收到任何关于这个问题的错误：

当我在应该发生自动完成的文本框中时，这张图片被剪掉了

这是让我的自动完成工作的代码：

$(document).ready(function () {
$('#Categories').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/codeAC/AutoCompleteCategory",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.subcategory, value: item.subcategory };
                }))
            }
        })
    },
});
});

我如何链接我的 jQuery：

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery-ui.js")
@Scripts.Render("~/Scripts/jquery-1.10.2.js")
@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/jquery-ui.js")
@Scripts.Render("~/Scripts/jquery-ui.min.js")
@Scripts.Render("~/Scripts/Scripts.js")
@Scripts.Render("~/Scripts/moment-with-locales.js")
@Scripts.Render("~/Scripts/moment-with-locales.min.js")
@Scripts.Render("~/Scripts/moment.js")
@Scripts.Render("~/Scripts/moment.min.js")
@Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
@Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js")

【问题讨论】：

您是否在控制台中遇到任何错误？
@DivyeshSavaliya 当我发布时我没有收到任何警报弹出错误..
打开开发工具看看有没有错误
您的自动完成数据是静态的还是来自某个 json 文件？
有点打赌，这是您在 html 中“链接”到 jquery 的方式。显示是 Html。

标签： jquery asp.net publish

【解决方案1】：

正如我在评论中所说，您的链接是错误的。

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-ui.js")
@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/jquery-ui.min.js")
@Scripts.Render("~/Scripts/Scripts.js")
@Scripts.Render("~/Scripts/moment-with-locales.min.js")
@Scripts.Render("~/Scripts/moment.min.js")
@Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js")

这是一种更正确的方法，删除重复项。

其次，我认为您的链接中的~ 是您的问题。因为~ 表示 Root 并且根据您网站在服务器上的位置，这可能是个问题。

【讨论】：

我也在使用 jQuery 进行日期选择器，这很有效.. 只是不能自动完成
如果您将其加载到实时站点，您能否提供网址，然后我会检查它不适合您的原因
有些人声称它的 jquery 版本是原因，因为他们说 AutoCompleate 需要 jquery 1.11.3 而你使用 1.10.2。尝试用改变它
对不起，这也不起作用..但在本地主机中测试时它确实起作用
听起来这与您上传它的位置有关。无法提供更多信息

【解决方案2】：

发现问题：

$(document).ready(function () {
    $('#Categories').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/codeAC/AutoCompleteCategory",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.subcategory, value: item.subcategory };
                }))
            }
        })
    },
});
});

需要改成：

$(document).ready(function () {
    $('#Categories').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "//*folder on server name*//codeAC/AutoCompleteCategory",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.subcategory, value: item.subcategory };
                }))
            }
        })
    },
});
});

【讨论】：

这正是我正在寻找的解决方案！