元素的jQuery響應加入到奇怪。點擊（函數（）

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

解決上http://jsfiddle.net/U2E3Y/10/。您通過點擊事件限制了父元素$('#mobilecb')。

Answer 2

有關使用jQuery UI的排序方式。 http://jqueryui.com/sortable/