javascript - jquery 可排序中动态创建的元素

Question

我的代码是这样的:

$(function  () {
      $("ol.mauDIDROP").sortable({
    group: '.example'
  });
    $("ol.areaDROP").sortable({
    group:  '.example',
    drop: false,
    drag: false,
  });
   $("ol.areaDROP>li>ol").sortable({
      group:  '.example',
      drop: true,

  });
});

演示和完整代码:https://jsfiddle.net/oscar11/15qvta6p/6/

拖放功能正常

但是如果:

<li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>

我转向 javascript 以使用这样的附加:https://jsfiddle.net/oscar11/kdf7xngk/1/

拖放不起作用

关于如何解决这个问题有什么建议吗？

谢谢

Answer 1

将脚本更改为:

 $(function() {
   $("ol.areaDROP").append("<li>Single Room<ol></ol></li><li>Double Room<ol></ol></li><li>Family Room<ol></ol></li>");
   $("ol.mauDIDROP").sortable({
     group: '.example'
   });
   $("ol.areaDROP").sortable({
     group: '.example',
     drop: false,
     drag: false,
   });
   $("ol.areaDROP>li>ol").sortable({
     group: '.example',
     drop: true,

   });
 });