遗漏的类型错误:$(...)nestedSortable不是一个函数

问题描述:

我尝试使用从https://github.com/mjsarfatti/nestedSortable嵌套种类的插件,但我不断收到此错误

Uncaught TypeError: $(...).nestedSortable is not a function 

这是我的头

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title><?php echo $meta_title; ?></title> 


    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/jquery-ui.js"></script> 
    <script src="js/jquery.mjs.nestedSortable.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

这是身体

<ol class="sortable"> 
    <li><div>Some content</div></li> 
    <li> 
     <div>Some content</div> 
     <ol> 
      <li><div>Some sub-item content</div></li> 
      <li><div>Some sub-item content</div></li> 
     </ol> 
    </li> 
    <li><div>Some content</div></li> 
</ol> 
,我使用

Javascript代码

$(document).ready(function(){ 
    $('.sortable').nestedSortable({ 
     handle: 'div', 
     items: 'li', 
      toleranceElement: '> div' 
    }); 
}); 

请帮我

+0

我不擅长与jQuery,但有时当我得到这个错误在JS问题在功能中。 –

+0

相同的代码在没有任何修改的情况下可以在小提琴中运行,但脚本资源除外:http://jsfiddle.net/GCu2D/785/>可能试着使用cdn文件而不是本地文件。或者只是更新nestedSortable文件。 –

+0

包含插件时要小心;在包含jquery之前或之后。有时候这可能是一个问题。 –

我已经测试nestedSortable之前添加此代码,这代码工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title><?php echo $meta_title; ?></title> 


    <!-- Bootstrap --> 
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script> 


     <script> 
     $(document).ready(function(){ 
      $('.sortable').nestedSortable({ 
      handle: 'div', 
      items: 'li', 
      toleranceElement: '> div' 
      }); 
     }); 
     </script> 
    </head> 

    <body> 

     <div> 
     <ol class="sortable"> 
      <li><div>Some content</div></li> 
      <li> 
      <div>Some content</div> 
      <ol> 
       <li><div>Some sub-item content</div></li> 
       <li><div>Some sub-item content</div></li> 
      </ol> 
      </li> 
      <li><div>Some content</div></li> 
     </ol> 

     </div> 
    </body> 

请尝试将此代码放入文件并执行它。如果它工作不要从那里

你必须使用的nestedSortable升级版。这里是nestedSortable的updaed版本:0​​

而且你有没有在文件中包含jQuery的ui.js文件:<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>你包括jquery.mjs.nestedSortable.js文件

+0

他已经包括jquery-ui,这是在他的示例代码。 –

使用外部链接

下载的CSS和JS让他们在你的项目文件夹,包括他们的错误指示的方法不能在你的jQuery对象上存在。这意味着nestedSortable插件尚未加载。

请参阅本线:

<script src="js/jquery.mjs.nestedSortable.js"></script> 

检查地址是否正确,以及JavaScript文件存在于该位置。

更新脚本

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script> 

<script src="js/jquery-ui.js"></script> 
<script src="js/jquery.mjs.nestedSortable.js"></script> 

在以下github上:NESTEDSORTABLE