jQuery onchange Ajax

Question

i made a function that sends data (ajax) to the database and depending on the response from the server i need to alert a message but it seems like whenvever i change the select option i get the alert message for each change(if i change the select four times when i click i get the alert four times ) , but if i remove my ajax function and replace it simply by an alert i get it once not repeating itself here is my JS

        $('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {

                $(".red").on('click', function (evt) {
                    if ('done' == msg) {
                        evt.preventDefault();
                        alert('NOP');
                    }
                })



            });
        });

Answer 1

the event that you are binding i think is wrong. For newly append items is better in your case to use

$(document).on('click', ".red", function (evt) {

                })

And it must be moved outside the ajax success because now you are triggering it every time

----- Edited --- If you want just to alert the output of the ajax you dont need the onClick event

$('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {
                    if (msg === 'done') {
                        evt.preventDefault();
                        alert('NOP');
                    }
            });
        });

If you want to show the latest result on a button click you can store the msg on a global variable and on click of a div show that like

var globalMsg = "";
$('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {
              globalMsg = msg
            });
        });

$(".div").click(function() { alert(globalMSG); });