Question

我正在研究ASP.NET MVC应用程序。我试图用jQuery UI创建一个对话框窗口。但是，每当我将$(document).ready(function() {}添加到我的代码中时，它就不再起作用了。这是我的代码：

$(document).ready(function() {
    $("#loginContainer").dialog({
        width: 340,
        height: 340,
        resizable: false,
        show: {
            effect: "fade",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        }
    });

    $(".openLogin").click(function () {
        $("#loginContainer").dialog("open");
    });
});

以下是我添加的捆绑包

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

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-1.10.4.js",
                "~/Scripts/jquery-ui-1.10.4.min.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));


    bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css").Include(
                  "~/Content/themes/ui-lightness/jquery-ui.css",
                  "~/Content/themes/ui-lightness/jquery.ui.core.css",
                  "~/Content/themes/ui-lightness/jquery.ui.resizable.css",
                  "~/Content/themes/ui-lightness/jquery.ui.selectable.css",
                  "~/Content/themes/ui-lightness/jquery.ui.accordion.css",
                  "~/Content/themes/ui-lightness/jquery.ui.autocomplete.css",
                  "~/Content/themes/ui-lightness/jquery.ui.button.css",
                  "~/Content/themes/ui-lightness/jquery.ui.dialog.css",
                  "~/Content/themes/ui-lightness/jquery.ui.slider.css",
                  "~/Content/themes/ui-lightness/jquery.ui.tabs.css",
                  "~/Content/themes/ui-lightness/jquery.ui.datepicker.css",
                  "~/Content/themes/ui-lightness/jquery.ui.progressbar.css",
                  "~/Content/themes/ui-lightness/jquery.ui.theme.css"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

    BundleTable.EnableOptimizations = true;
}

在我的_Layout.cshtml中

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/themes/ui-lightness/css")
@Scripts.Render("~/bundles/modernizr")

我的错误在哪里？

Answer 1

我怀疑你有多个@ Scripts.Render（“jquery”），可能在_Layout和Index中，这会导致负载冲突。

脚本不适用于$（document）.ready（function（）{}

1 个答案: