I have to click twice to initialize a sort table with Sortable.init()

Question

I am using Ajax Load More to load some tables on my WordPress website. I added a sorting function to the table using a plugin called sortable. Before loading with ajax, I can sort out the table by simply adding data-sortable to the table tag like this <table class="uk-table uk-table-large" data-sortable>.

But it stopped working once I started using ajax to load the tables. So I tried to initialize the sorting on each table loaded via ajax using the code below:

jQuery(document).on('click', '.floor .uk-table', function() {
   Sortable.init()
});

The code seems to work but I had to click each tables' headers twice for each column to be sorted out. I am not an expert with javascript so I am not sure why this is happening.

Answer 1

Instead of adding a click event listener to the document you can just add it directly to the class itself.
Example:

jQuery('.uk-table').click(function() {
   Sortable.init()
});