在 jQuery .load() 函数之后，jQuery sortable() 不起作用

Question

在 jQuery .load()函数之后，jQuery sortable()不起作用。

jQuery 在单击事件上发生了同样的问题。 我用$(document).on('click','selector',function(){})而不是$('selector',function(){}) 。

但这次我不能这样做。

我应该怎么办？ 我的可排序代码块是这样的：

$(function () {
    $("ul.droptrue").sortable({
        connectWith: "ul",
        receive: function (event, ui) {
            console.log(this.id)
            console.log(ui.item[0].id)

            $.ajaxSetup({
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: window.location.origin + "/durumupdate/",
                data: {
                    colon_id: this.id + "",
                    card_id: ui.item[0].id
                },
                success: function (response) {
                    console.log(response)
                },
                error: function (response) { console.log(response) }
            });
        }
    });
    console.log(this.id)
    $("#sortable1, #sortable2, #sortable3").disableSelection();
});

Answer 1

我没有看到任何.load在您发布的代码，但感觉就像你更换.droptrue中的元素.load回调。

如果是这样，即使有一个.droptrue元素，它是不一样的一个你叫.sortable在网页加载时，这究竟是为什么它不工作。

解决的办法是打电话.sortable(...在.load回调假设你打电话。 .load当按钮#myButton一直点击它应该是这个样子：

<div id="sortable-list">
  <ul class="droptrue">
    <li ....
  </ul>
</div>

function makeSortable() {
  $("ul.droptrue").sortable({
    ......
  });
}

$(function() {
  makeSortable();

  $('#myButton').click(function() {
    $('#sortable-list').load('https://example.com #sortable-list', function() {
      makeSortable();
    });
  });
});