javascript - Jquery onchange Ajax

Question

我做了一个函数，将数据(ajax)发送到数据库，根据服务器的响应，我需要提醒一条消息，但似乎每当我更改选择选项时，我都会收到每次更改的警报消息(如果我更改当我点击时选择四次，我收到警报四次)，但是如果我删除我的ajax函数并简单地用警报替换它，我就会收到一次，不会重复，这是我的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

我认为您绑定(bind)的事件是错误的。对于新追加的项目，在您的情况下最好使用

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

                })

并且它必须移到ajax成功之外，因为现在你每次都会触发它

----- 已编辑 --- 如果您只想提醒 ajax 的输出，则不需要 onClick 事件

$('.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');
                    }
            });
        });

如果您想在单击按钮时显示最新结果，您可以将消息存储在全局变量中，然后单击 div 显示该结果，例如

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); });