I'm a novice programmer with a basic grasp of JS and JQuery. I am using Fancybox to pull an HTML Table via Ajax and show it to users of our system.

HTML (within Fancybox):

<table>
    <thead>
        <tr>
            <th class="priority-2 sortable date" style="min-width:150px">Date / Time</th>
            <th class="priority-2 sortable text" style="min-width:150px">Changed By</th>
            <th class="priority-1 sortable text" style="min-width:150px">Previous Value</th>
            <th class="priority-1 sortable text" style="min-width:150px">New Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="priority-2">15/12/2021 11:23</td>
            <td class="priority-2">John Smith</td>
            <td class="priority-1">Stalled</td>
            <td class="priority-1">Test</td>
        </tr>
        <tr>
            <td class="priority-2">14/12/2021 16:58</td>
            <td class="priority-2">David Jones</td>
            <td class="priority-1">Live</td>
            <td class="priority-1">Stalled</td>
        </tr>
   </tbody>
</table>

I have some Javascript that I use elsewhere to sort tables when the is clicked which works OK. I know that to get this to work on Ajax content I have to change the .click() to use .on() but with my my limited knowledge I cannot get the syntax to work correctly.

JS (in seperate .js file):

Original Code:

$('thead th.sortable').each(function(index, listItem) {

    $(this).click(function(e){

        e.preventDefault();

        // sort column code here

    });
});

My attempt at amending the code:

$('thead th.sortable').each(function(index, listItem) {

    $(this).on('click', function(e) {

        e.preventDefault();

        // sort column code here

    });
});

I have tried using $(document).(this) etc. but to no avail. The above works in the main HTML but not in the Fancybox window.

I use the following JS Code to show/hide sections which I've successfully adapted to work in the Fancybox window:

$(document).on('click', '.header-row', function(e) {

    // Toggle Section code here

});

Any help with the syntax I need is appreciated. Apologies in advance for the poor coding knowledge.