在 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();
    });
  });
});