After jQuery .load() function, jQuery sortable() doesn't work

Question

After jQuery .load() function, jQuery sortable() doesn't work.

The same issue happened with jQuery on click event. I solved it with $(document).on('click','selector',function(){}) instead of $('selector',function(){}) .

But this time I could not do the same way.

What should I do? My sortable code block is this:

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

I don't see any .load in the code you posted but feels like you're replacing the .droptrue element in the .load callback.

If so, even though there is a .droptrue element, it's not the same one you called .sortable for on page load, this why it's not working.

The solution is to call .sortable(... in the .load callback. Assuming you call .load when a button #myButton has been clicked it should look something like:

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