Question

我一整天都在努力但却无法完成这项工作。这是我的设置：

我已经安装了：jQuery 2.1.3和jQuery.UI.Combined 1.11.2。

在BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

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

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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

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

然而在〜/ Content / themes / base /中他们的名字缺少“jquery.ui”。前缀。

在我的布局中，我有：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

我可以通过查看firebug来确认jquery和jquery UI是否已加载到页面上但是当我尝试调用函数dialog()时我得到并且错误地说它不是函数。

<td>
                    <div style="width:100px;height:30px; background:#009814" onclick="showPopup(this)"> </div>
                    <div style="position:relative" class="input-group"> Indicatoris go here </div>
</td>

    function showPopup(elem)
            {
                var el = $(elem);
                //el.siblings()[0] it has only 1 sibling (a div)
                el.siblings()[0].dialog({
                    autoOpen: false
                });
                el.siblings()[0].dialog('open');
            }

这里有什么问题？

Answer 1

您的代码存在一些问题。首先，我建议不要使用onclick处理程序，而是使用jquery click事件，但我不会竖起来。

我会假设您的脚本位于正确的脚本块中，如果不是这样的话。

接下来，你的问题是你的el.siblings()[0]代码没有返回一个jQuery对象，而是一个HTML Dom DIV对象，因为jQueryUI可以处理jQuery对象，这就是为什么它可以＆＃ 39;找到对话框。这是一个简单的解决方法。

function showPopup(elem)
        {
            var el = $(elem);
            //el.siblings()[0] it has only 1 sibling (a div)
            var sib = $(el.siblings()[0]).dialog({
                autoOpen: false
            });
            sib.dialog('open');
        }

所以，你的问题与MVC无关，或与捆绑或你认为的任何其他问题有关......它只是糟糕的jQuery代码。

无法使jquery UI在MVC中工作

1 个答案: