JQuery .load() unexpected behaviour

Question

I have a div parent where every child div is a list of items populated dynamically from the server. Each item has a checkbox next to it, which when checked sends that item to the bottom of the list in parent div.

I have a ajax request that sends back to the server the checkbox status to update the database record, after this ajax call I then try to use the .load() method to repopulate the div parent with each child divto also include the checked item to be at the end of the list.

I try this:

$('#showTasks').load('/wp #showTasks', function(){
    loadTasks();    
});

Where #showTasks is the parent div and loadTasks() gets the server data and creates and appends each child div to the parent and appends checked items to the end of the div.

This however doesn't send the checked item to the bottom and I have to refresh manually to see this particular div element appended last on the list.

Answer 1

I think we can put your piece of code in the $(document) as shown below

$(document).ready(function()
{
  $("#showTasks").load();
  loadTasks();
});