Ajax event does not run with modal

Question

I have this ajax. I call a modal, which in theory, when clicked on an id, would execute this ajax, but does not execute.

 $("#ClassificacaoId").on('change click', function () {
            valor = $('#ClassificacaoId').val();
            if (valor === "1") {
                $.ajax({
                    type: 'POST',
                    url: 'GetContratoPedido',
                    data: { dado: valor },
                    dataType: 'json',
                    success: function (dados) {
                        if (dados !== null) {

                            var selectbox = $('#contrato');
                            $.each(dados, function (i, d) {
                                $('<option>').val(d.id).text(d.value).appendTo(selectbox);
                            });


                            $("#cmbPedido").fadeIn(500);
                        }

                    },
                    error: function () {
                        console.log("Falha de enviar AJAX");
                    }
                })
            }
            else if (valor === "2") {

                $("#cmbPedido").fadeOut();
            } else if (valor === "3") {
                $("#cmbPedido").fadeOut();
            }
        });

        $("#contrato").on('click', function () {
            contrato = $("#contrato").val();

            $.ajax({
                type: 'GET',
                url: 'GetContratos',
                data: { dado: contrato },
                dataType: 'JSON',
                success: function (dados) {
                    if (dados !== 0) {

                        var selectbox = $('#itensContrato');
                        $.each(dados, function (i, d) {
                            $('<option>').val(d.id).text(d.value).appendTo(selectbox);
                        });


                        $("#cmbItensContrato").fadeIn(500);
                    } else {
                        $("#cmbItensContrato").fadeOut(500);
                    }
                },
                error: function () {
                    console.log("Erro ao enviar AJAX");
                }
            });

        });

Answer 1

http://api.jquery.com/on/

If when declaring events through the jQuery . on() function, there are no elements in html yet, these events will not be triggered. In such a case, it should defer its execution, for example: If when declaring events through the jQuery . on() function, there are no elements in html yet, these events will not be triggered. In such a case it should defer its execution, for example:

$('body').on('click', '#future-element-id', function () {
    ...
});

'#Future-element-id' will be an html element that will only exist later.

If the element does not exist, when declaring the event, the event will not be triggered in this way:

$('#future-element-id').on('click', function () {
    ...
});