jQuery - TypeError: $(...).sortable 不是函数

Question

我有这段代码，但它还不能工作。几天前它有效，但不再有效。而且我不记得我可以改变什么......

 $( ".guardarorden" ).click(function( event ) {
  event.preventDefault();
});

$(document).ready(function(){


    $(function() {
        $( "#ordename" ).sortable({
          placeholder: "ui-state-highlight",
          cursor: 'move',
          opacity: 0.5,
          activate: function( event, ui ) {
            $('.guardarorden').removeClass('hidden');
          },
          update: function(event, ui){
            var nuevoOrden = $(this).sortable("serialize"); // Here is my problem!!!
            alert(nuevoOrden);

            $(window).on('beforeunload', function(){
              return 'Si has realizado cambios, asegurate de guardarlos antes de abandonar la página...';
            });
            $( ".guardarorden" ).click(function( event ) {
                event.preventDefault();

              $.post('guardaorden/'+nuevoOrden, {list: nuevoOrden},function(data){

                    }, 'json');
              $(window).off('beforeunload');
              alert("Orden guardado correctamente. Aunque esto sería mejor con un mensaje de error típico");
              location.reload();
              //alert("guardado con éxito!")             
            });         
          }
        });
        $( "#ordename" ).disableSelection();
      });
});

我不知道为什么var nuevoOrden = $(this).sortable("serialize"); 不是一个函数。有什么想法吗？

已编辑

我认为这与 jquery-ui 有关。我在主页中加载每个脚本，如下所示：

{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')}}
{{ HTML::script('js/jquery-1.11.1.min.js') }}
{{ HTML::script('js/bootstrap-multiselect.js') }}
{{ HTML::script('js/bootstrap-slider.js') }}
{{ HTML::script('js/sisyphus.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js')}}
{{ HTML::script('/js/ckeditor/ckeditor.js')}}
{{ HTML::script('/js/ckeditor/adapters/jquery.js')}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}}

但是我已经尝试手动加载页面中出现问题的最后一个并且它可以工作......但只是有时（我不明白）。第一次效果很好，但后来我收到错误消息。

如果我从我的页面中删除{{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}} 并在我的浏览器中重新加载该页面，然后我将{{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}} 再次放入我的页面并再次重新加载它，它可以工作。直到我改变页面。当我回来时，它不再起作用了...... :(

编辑 2

jQuery-ui 和 CKEditor 之间有什么不兼容的地方吗？如果我删除{{ HTML::script('/js/ckeditor/ckeditor.js')}}和{{ HTML::script('/js/ckeditor/adapters/jquery.js')}}就没有问题了！！

Answer 1

加载 Jquery 和 Jquery-UI 的顺序很可能是错误的。尝试先加载 Jquery，然后再加载 Jquery-UI。