Question

我有一个局部视图，它有许多Div，每个都设置为可以使用JQuery UI可拖动库进行拖动。

Jquery脚本加载在母版页中，当你自己打开它时，它可以正常工作。但是，我使用ajax在主页面中加载此部分视图，通过在下拉列表中选择一个选项来触发。当我这样做时，jquery代码不再有效，我收到此错误：

Uncaught TypeError: Object #<an Object> has no method 'draggable'

似乎partialview无法访问jquery库，但我不知道为什么。

我正在使用将Div设置为可拖动的代码如下：

 $(function () {
        $(".NameBox").draggable({
            revert: true,

            start: function (event, ui) {

                document.onselectstart = function () { return false; };

            },
            stop: function (event, ui) {
                document.onselectstart = function () { return true; }
            }

        });
        $(".NameBox").live(droppable({
            accept: '.NameBox',
            drop: function (event, ui) {
              alert(ui.draggable.attr("dropped"))


        });
});

使用Jquery加载语句加载局部视图：

$('#relationships').load('<%= Url.Action("ListRelationshipMappings", "Admin") %>/' + $("#availibleInstances").val())

availibleInstances只是一个允许选择ID字段的下拉列表。

Answer 1

事实证明，这是因为我还使用Telerik MVC脚本寄存器选项来加载它的脚本，这些脚本加载了它自己的Jquery版本，这导致了冲突。

这可以通过使用以下内容加载没有Jquery的Telerik脚本来解决：

<% Html.Telerik().ScriptRegistrar().jQuery(false); %>

Answer 2

通常会发生此错误，因为您没有正确引用UI javascript库。

Answer 3

<!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

例如，如果您在库之前列出了您的UI ...如上所示，您将收到此错误。如果你这样做，如下所示：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->

你不会。

快乐的codin'; D

只是为了不让新人产生混淆，不需要任何东西......只需使用注释掉的部分进行演示。

Answer 4

我遇到了同样的问题，我意识到我在母版页中加载了以下脚本，在部分视图中我使用Ajax加载...

确保您没有加载脚本两次......

部分视图内部无法使用JQuery Draggable方法

4 个答案: