添加项目时,拖动事件不起作用

When the item is added, the drag event does not work

拖放 eventim 有效,但我不能 运行 使用我添加的按钮。 我知道点击时应该 运行,但我没有得到任何结果。 你能帮我吗?谢谢...

https://codepen.io/celilsahin/pen/BqGvLm

<ul class="handles list">
<li class="red"><span>::</span></li>
<li class="purple"><span>::</span></li>
<li class="orange"><span>::</span></li>
<li class="yellow"><span>::</span></li>
<li class="blue"><span>::</span></li>
</ul>

<button>Add</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.sortable.js"></script> 
<script>
$(function(){
$('.handles').sortable({
handle: 'span'
});

("button").click(function(){
$( ".handles" ).append($('<li class="red"><span>::</span></li>').hide().fadeIn(300));
});
});
</script>

你可以添加 $('.handles').sortable('refresh');在代码中

$("button").click(函数(){ $( ".handles" ).append($('::').hide().fadeIn(300)); $('.handles').sortable('refresh'); });