Jquery submit does not work after ajax pagination

I am using an ajax pagination script which works fine - https://github.com/gbirke/jquery_pagination

On the first page everything works great, there are submit buttons (multiple forms) on each page, which send data to the database via a jquery POST.

However, the jquery post only works for forms/buttons on the first page that is loaded. If you switch to another page on the pagination the jquery post / submit button does not work.

Any suggestions would be much appreciated, can't seem to figure it out.

Code snippets:

Pagination Scripts

<script>
    $(document).ready(function() {
        $("#Pagination").trigger('setPage', [<?php echo $member_Program_Week_calc; ?>]);
    });
</script>

 <script type="text/javascript">
    function pageselectCallback(page_index, jq){
        var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
        $('#Searchresult').empty().append(new_content);
        return false;
    }

    function initPagination() {
        // count entries inside the hidden content
        var num_entries = jQuery('#hiddenresult div.result').length;
        // Create content inside pagination element
        $("#Pagination").pagination(num_entries, {
            callback: pageselectCallback,
            items_per_page:1 // Show only one item per page
        });
     }

    // When document is ready, initialize pagination
    $(document).ready(function(){      
        initPagination();
    });
 </script>

ajaxSubmit function

<script type="text/javascript">
$(document).ready(function() {

    $('#completetask_<?php the_sub_field('tasks_id'); ?>').submit(ajaxSubmit); // example

        function ajaxSubmit(){

                $(this).find(':submit').attr('disabled','disabled');

                var completetask = jQuery(this).serialize();

                jQuery.ajax({
                        type:"POST",
                        url: "/wp-admin/admin-ajax.php",
                        data: completetask,
                        success:function(data){
                jQuery("#feedback").html(data);
                        },
                error: function(errorThrown){
                    alert(errorThrown);
                }  
                });
                return false;
        }
    });
</script>

Form Code

<form method="post" id="completetask_<?php echo $task_id; ?>">
    <input type="hidden" name="program_id" id="program_id" value="<?php echo $program_id; ?>"/>
    <input type="hidden" name="session_id" id="session_id" value="<?php echo $session_id; ?>"/>
    <input type="hidden" name="task_id" id="task_id" value="<?php echo $task_id; ?>"/>
    <input type="hidden" name="action" value="completeTask"/>

        <input class="program_task_submit_no program_task_submit_no_<?php echo $task_id; ?>" type="submit" value="COMPLETE TASK"/>

</form>

I've managed to solve this thanks to a suggestion from @charlietfl and a little further research.

The solution is event delegation, using the .on() function.

With my code, I changed the ajaxSubmit function code around using the .on function.

Simple Example:

$(document).on('submit', '#completetask', function(e) {
    //CODE
});

My Updated Code:

$(document).on('submit', '#completetask_<?php the_sub_field('tasks_id'); ?>', function(e) {

    $(this).find(':submit').attr('disabled','disabled');

    var completetask = jQuery(this).serialize();

    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";

    document.body.appendChild(css);

    jQuery.ajax({
            type:"POST",
            url: "/wp-admin/admin-ajax.php",
            data: completetask,
            success:function(data){
    jQuery("#feedback").html(data);
            },
    error: function(errorThrown){
        alert(errorThrown);
    }  
    });
    return false;

});

I removed the original ajaxSubmit function code.

Working with CSS

I also needed CSS to execute once the button is submit which changed the style of the form. However, changing page reset this back to normal. In order to solve this I executed CSS styling within the script.

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";

document.body.appendChild(css);

Thanks.