Question

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

<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>

请问你能帮帮我吗？

Answer 1

在上面的代码中，您没有包含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>

Answer 2

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

所以包括jQuery和jQueryUI

请在此处查看此演示：http://jsfiddle.net/pratik136/8JxfK/

Answer 3

假设你已经包含了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 />

可排序不起作用

3 个答案: