Paging with jquery event

Question

I’m having difficulty conducting a search when I call the 2nd of the search performed. I have an input field, in which the user when entering the data is triggered an event and performs the search of the database.

<!-- Input de busca -->
<input type="text" class="form-control" id="contrato">

<!-- Valor retornado pelo jquery -->
<span id="todos_agd"></span>

Jquery

$('input').on('keyup change', function(){
    var contrato = $('#contrato').val();

    //enviar informações para listar registros
    var qnt_result_pg = 100; //quantidade de registro por página
    var pagina = 1; //página inicial

    $(document).ready(function () {
        listar_todos_agd(pagina, qnt_result_pg); //Chamar a função para listar os registros
    });

    //function para enviar os dados para a pagina listar_todos_agd
    function listar_todos_agd(pagina, qnt_result_pg){
        var dados = {
            contrato: contrato,
            pagina: pagina,
            qnt_result_pg: qnt_result_pg,
        }
        $.post('/listar/listar_todos_agd.php', dados , function(retorna){
        //Subtitui o valor no seletor id="todos_agd"
        $("#todos_agd").html(retorna);
        
    });
    }

});

Due to the amount of records in the database I implemented a pagination so that the search is not time consuming.

//Paginação na página listar_todos_agd.php
//Somar a quantidade de notícias
    $result_pg = "SELECT COUNT(id) AS num_result FROM tbl";
    $resultado_pg = mysqli_query($conn, $result_pg);
    $row_pg = mysqli_fetch_assoc($resultado_pg);

                //Quantidade de pagina
    $quantidade_pg = ceil($row_pg['num_result'] / $qnt_result_pg);

                //Limitar os link antes depois
    $max_links = 5;

    echo '<nav aria-label="paginacao">';
    echo '<ul class="pagination">';
    echo '<li class="page-item">';
    echo "<span class='page-link'><a href='#' onclick='listar_todos_agd(1, $qnt_result_pg)'>Primeira</a> </span>";
    echo '</li>';
    for ($pag_ant = $pagina - $max_links; $pag_ant <= $pagina - 1; $pag_ant++) {
        if($pag_ant >= 1){
            echo "<li class='page-item'><a class='page-link' href='#' onclick='listar_todos_agd($pag_ant, $qnt_result_pg)'>$pag_ant </a></li>";
        }
    }
    echo '<li class="page-item active">';
    echo '<span class="page-link">';
    echo "$pagina";
    echo '</span>';
    echo '</li>';

    for ($pag_dep = $pagina + 1; $pag_dep <= $pagina + $max_links; $pag_dep++) {
        if($pag_dep <= $quantidade_pg){
            echo "<li class='page-item'><a class='page-link' href='#' onclick='listar_todos_agd($pag_dep, $qnt_result_pg)'>$pag_dep</a></li>";
        }
    }
    echo '<li class="page-item">';
    echo "<span class='page-link'><a href='#' onclick='listar_todos_agd($quantidade_pg, $qnt_result_pg)'>Última</a></span>";
    echo '</li>';
    echo '</ul>';
    echo '</nav>';


}else{
    echo "<div class='alert alert-danger' role='alert'>Nenhum registro encontrado!</div>";
}

The problem is that on the first page the search is done perfectly, but when clicking on the second page that triggers the function by onclick='listar_todos_agd' to continue the search on another page the search does not continue due to the event $('input').on('keyup change', function(){ that cannot be located. How can I improve my code so that it can also list the search on the 2nd page?