Question

我有JsFiddle处理我正在努力解决的问题。

基本上，我有一组复选框。我还有一个字段，允许您向该集添加复选框项。最后，我有上下箭头，可以让你改变排序顺序。

我遇到的问题是添加到集合中的项目反应奇怪。当我单击将这些项目向上移动时，它们会跳到该组的顶部。我looked into this link并找到了很好的信息，但仍然无法解决问题。

代码如下。我感谢您提出的任何建议！

HTML

<div id="main">
    <div id="addbox">
        <p>Enter value:
            <br>
            <input id="Text1" type="text" size="38">
            <input id="Button3" type="submit" value="+">
        </p>
    </div>
    <div id="selectbox">
        <p>You can also select from these:</p>
        <div id="mobilecb">
            <div class="cbholder">
                <div class="cbitem" id="cbitem-1-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">1</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
            <div class="cbholder">
                <div class="cbitem" id="cbitem-2-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">2</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
            <div class="cbholder">
                <div class="cbitem" id="cbitem-3-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">3</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
        </div>
    </div>
</div>

CSS

#main {
    width:400px;
}
.cbholder {
    border: 1px solid #ccc;
}
}
.cblocation {
    float:left;
    margin: 10px 10px 10px 0px;
    width:80%;
}
.cbdown {
    border-color: black transparent transparent;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: right;
    margin-top:0px
}
.cbup {
    border-color: transparent transparent black !important;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: right;
    margin: 0px 4px 0px 20px;
}
#mobilecb {
    clear:both;
    display:inline-block!important;
    text-align:left;
    float:left;
    background:#fff;
    font-size:.8em;
    border:1px solid #000;
}
.cbholder {
    margin: 20px 0 0px 0;
}

JQuery（1.4.1）

 $('#Button3').click(function () {
     $('#mobilecb').append('<div class="cbholder"><div class="cbitem"><input type="checkbox"    checked="" class="thecb" value="' + $('#Text1').val() + '" name="collection[]">' + $('#Text1').val() + '</div><div class="cbup"></div><div class="cbdown"></div>   </div>')
         .bind("click", function (e) {
         $('.cbup').click(function () {
             var parent = $(this).parent();
             parent.insertBefore(parent.prev());
         });
         $('.cbdown').click(function () {
             var parent = $(this).parent();
             parent.insertAfter(parent.next());
         });
     });
 });

 $('.cbup').click(function () {
     var parent = $(this).parent();
     parent.insertBefore(parent.prev());
 });
 $('.cbdown').click(function () {
     var parent = $(this).parent();
     parent.insertAfter(parent.next());
 });

Answer 1

如何使用Jquery UI进行排序。http://jqueryui.com/sortable/

Answer 2

在http://jsfiddle.net/U2E3Y/10/上解决了。您已将父元素$('#mobilecb')与click事件绑定在一起。

jQuery添加的元素奇怪地响应.click（function（）

2 个答案: