jQuery sortable 不适用于动态添加的 div

jQuery sortable doesn't work with dynamically added divs

我创建了一个动态添加 divs 元素的按钮。我想使用 jQuery .sortable() 来更改 divs 的顺序,但由于某些原因它不正确。

我的代码:https://jsfiddle.net/t5o1npd4/

$(document).ready(function() {
  //Create button
  $(document).on('click', '#add', function() {
    var $skill1 = '<select><option disabled selected hidden>Select One</option></select>';

    $('<div class="myClass"></div>').appendTo('#area').append($skill1);
  });
});

//Why not works the sortable to dynamically added divs??
$("#area").sortable({
  appendTo: "parent",
  helper: "clone",
  handle: ".myClass",
  stop: function(ui, event) {
    var id = event.item.index();
  }
}).disableSelection();
.myClass {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid #909090;
  border-bottom: none;
  background-color: #cccccc;
}

.myClass:last-child {
  border-bottom: 1px solid #909090;
}

#area input[type="text"] {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="add"><b style="font-size:14px;">+</b> Add</button>

<div id="area"></div>

尝试去掉初始化语句中的handle行。

$(document).ready(function() {
  //Create button
  $(document).on('click', '#add', function() {
    var $skill1 = '<select><option disabled selected hidden>Select One</option></select>';

    $('<div class="myClass"></div>').appendTo('#area').append($skill1);
  });
});

//Why not works the sortable to dynamically added divs??
$("#area").sortable({
  appendTo: "parent",
  helper: "clone",
  stop: function(ui, event) {
    var id = event.item.index();
  }
}).disableSelection();
.myClass {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid #909090;
  border-bottom: none;
  background-color: #cccccc;
}

.myClass:last-child {
  border-bottom: 1px solid #909090;
}

#area input[type="text"] {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="add"><b style="font-size:14px;">+</b> Add</button>

<div id="area"></div>