Ajax event does not execute with modal

Question

Ajax event does not execute with modal

Navigation

#1 by (1 votes)

0

I have this ajax. I call a modal, which in theory, when I clicked on an id, would execute that ajax, but it 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");
                }
            });

        });

javascript ajax

asked by anonymous 23.03.2018 / 15:53

1 answer

Toolbar hiding a piece of textview How to make a Criteria Join for this query

score 1 · Accepted Answer

link

If when you declare events using the jQuery.on () function, the elements in html do not yet exist, those events will not be triggered. In this case you should grant your execution, for example: If, when declaring events through the jQuery.on () function, the elements in html do not yet exist, those events will not be triggered. In this case you should defer your 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, at event declaration, the event will not be triggered this way:

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