$(...).sortable 在 JQuery 回调中不是函数答案

【问题标题】：$(...).sortable is not a function when in JQuery callback$(...).sortable 在 JQuery 回调中不是函数
【发布时间】：2018-07-03 10:18:47
【问题描述】：

使用这个 HTML（树枝）：

 <li class="ipsFieldRow">
    <ul id="customSortable">
        {% for plugin in plugins %}
        <li id="{{plugin.name ~ '-sort'}}">{{plugin.name}}</li>
        {% endfor %}
    </ul>

        <script>
 //Put Here Works Fine

         $("#customSortable").sortable();
         $("#customSortable").disableSelection();

 //Put in a document ready causes the '$(...).sortable is not a function' error.

        $(document).ready(function() {
              $("#customSortable").sortable();
                $("#customSortable").disableSelection();
        });
        </script>

 <li

通过代码中的两个cmets来描述问题。简单地说，当简单地内联到 HTML 中时，.sortable 可以完美地工作，但在任何 jquery 回调中，它会导致 sortable is not a function 错误。这对我来说是个问题的主要原因是我想在按钮单击回调中调用 sortable('toArray') 以进行服务器交互。

从图片中可以看出，包含顺序错误的常见问题不是这里的问题。

【问题讨论】：

稍后您可能会包含第二个 jQuery 副本。
尝试把定义sortable的js放到最后。我认为 $ 对象已被覆盖。
@SLaks 你可能是正确的，考虑到我正在为一个论坛软件编写一个小部件，所以对于他们是否决定稍后包含 jquery 来说，我无法控制很多事情。有没有万无一失的方法来解决这个问题？
你试过deferring the load of JQuery-ui?

标签： javascript jquery user-interface

【解决方案1】：

您应该将代码包装在 IIFE 中，以给自己一个独立的范围。

然后您可以保存对您的 jQuery 实例的本地引用，这样您就不会受到未来对全局 window.$ 的更改的影响。

如果您自己安装了 jQuery（而不是依赖于现有副本），您可能还需要调用 .noConflict()。

【讨论】：