Javascript jQuery ui可排序：切换启用-禁用列表上的可排序

在我的CMS管理页面中，我有多个通过AJAX生成的列表，允许用户浏览不同级别的内容。每个列表元素都是在用户单击上一个列表时生成的。我使用jQuery：

$('#divid').on('click', 'ul', function() {
  //code to modify lists
  toggle_sortable();
});

现在我尝试添加一个切换按钮“拖动”来启用和禁用jQuery UI

sortable（）

。然而，由于列表是动态生成的，我无法完美地实现这一点。当前

toggle\u sortable（）

如下所示：

function toggle_sortable() {
  $('#drag').on('click', function(){
    //statement to check if sortable() is enabled and change state accordingly
  });
}

---

请帮我找到解决这种情况的办法。基本上，我无法确定是否在特定列表上启用了

sortable（）

。

我不完全确定我是否理解这个问题，但您一直在将单击处理程序堆积到相同的元素。要么过滤掉那些拥有它的，要么每次添加时先删除，如下所示：

```

```

以下是动态初始化列表并单击按钮在列表上切换可排序的。

要启用/禁用可排序功能，您可以使用如下所示的功能：

$('#toggle').click(function() {
        //check if sortable() is enabled and change and change state accordingly
      // Getter
      var disabled = $("#sortable").sortable( "option", "disabled" );
      if (disabled) {
        $("#sortable").sortable( "enable" );
        $('#status').html('Sortable is now Enabled!!');
      }
      else {
        $("#sortable").sortable("disable");
        $('#status').html('Sortable is Disabled');
      }
    });

---

谢谢你们的帮助！对不起，我不能准确地解释这个问题。但是，我使用了您的输入，最终得到了以下代码：

$('#drag').on('click', function () {
    event.preventDefault();
    $(this).toggleClass('sortable');
    if ($('#drag').hasClass('sortable')) {
        $('#div ul').sortable();
    } else {
        $('#div ul').sortable('destroy');
    }
});

上述代码将启用和禁用

sortable（）

，但不会将

sortable（）

应用于新添加的元素。对于那些我在附加这些列表的函数中使用了以下行

if ($('#drag').hasClass('sortable')) {
    $('#ulid').sortable();
}

if ($('#drag').hasClass('sortable')) {
    $('#ulid').sortable();
}