Сортируемый jQuery не работает с динамически добавленными div - PullRequest
Новая
       8

Сортируемый jQuery не работает с динамически добавленными div

0 голосов
/ 02 октября 2018

Я создал кнопку, которая динамически добавляет 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>

1 Ответ

0 голосов
/ 02 октября 2018

Попробуйте удалить строку дескриптора в операторе инициализации. 

$(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>
...