Sortable不起作用

我遇到问题。我希望能够对列表进行排序。我制作了这个脚本，但“可排序”不起作用。为什么？Sortable不起作用

<html> 
<script type="text/javascript"> 
     var count = 1; 
     $(function(){ 
      $('#add_item').click(function(){ 
       count++; 
       $('#container').append('<li id="item_' + count +'">' + count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" class="del_item" value="Elimina" /><br /></li>'); 
       return false; 
      }); 
      $('form').on('click', '.del_item', function(){ 
       count--; 
       $(this).parent().remove(); 
       return false; 
      }); 
      $('#container').sortable(); 
     }); 
    </script> 


<ul id="container"> 
      <li id="item_1">1° posto: <input type="text" id="item_1" name="items[]" /> 
      <input type="submit" class="del_item" value="Elimina" /><br /></li> 
     </ul> 
     <input type="submit" name="add_item" id="add_item" value="Aggiungi" /><br /> 

</html>

请问您能帮我吗？

来源

2012-03-05 Floppy88

在Chrome开发人员中使用控制台工具或Firefox与FireBug应该会给你一些关于实际错误的更多信息 – 2012-03-05 15:54:02

你的html没有'form'。 – 2012-03-05 15:59:19

在上面的代码中，你没有包含jquery和jquery-ui库。例如，把你的页面的<head>部分如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

此外，你应该添加<head>和<body>标签周围合适的内容，让您的网页看起来更像是这样的：

<html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var count = 1; 
     $(function(){ 
      $('#add_item').click(function(){ 
       count++; 
       $('#container').append('<li id="item_' + count +'">' + count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" class="del_item" value="Elimina" /><br /></li>'); 
       return false; 
      }); 
      $('form').on('click', '.del_item', function(){ 
       count--; 
       $(this).parent().remove(); 
       return false; 
      }); 
      $('#container').sortable(); 
     }); 
    </script> 
</head> 

<body> 
    <ul id="container"> 
     <li id="item_1">1° posto: <input type="text" id="item_1" name="items[]" /> 
     <input type="submit" class="del_item" value="Elimina" /><br /></li> 
    </ul> 
    <input type="submit" name="add_item" id="add_item" value="Aggiungi" /><br /> 
</body> 
</html>

来源

2012-03-05 15:51:14

谢谢！除了我错过了jquery-ui.min.js之外，我的脚本中的所有内容都是正确的 – Floppy88 2012-03-06 09:19:17

更确切地说，你没有包含jQueryUI库。 http://code.google.com/apis/libraries/devguide.html#jqueryUI

所以包括jQuery和jQueryUI的

都

看到这个演示在这里：http://jsfiddle.net/pratik136/8JxfK/

来源

2012-03-05 15:57:08 bPratik

假设你已经包括了jQuery和jQuery UI的JavaScript文件...

检查你的JavaScript调试器，您在$（'form'）。on（'click'... line）上有错误

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#add_item').click(function() { 
      count = $('.del_item').length + 1; 
      $('#container').append('<li id="item_' + count + '">' + count + '° posto: ' + '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="button" class="del_item" value="Elimina" /><br /></li>'); 
      $('.del_item').click(function() { 
       $(this).parent().remove(); 
       return false; 
      }); 
      return false; 
     }); 
     $('#container').sortable(); 
     $('#add_item').click(); 
    }); 
</script> 

<ul id="container"> 
</ul> 
<input type="button" name="add_item" id="add_item" value="Aggiungi" /><br />

来源

2012-03-05 16:09:02 Walk

Sortable不起作用

回答

相关问题