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不起作用

回答

相關問題