Из-за чего несколько раз инициируется событие?

215
24 сентября 2018, 03:30

Описание:
При нажатии на кнопку (назовем ее "Первая") аяксом подгружается форма,
в форме checkbox, при нажатии на него
с помощью jquery функции slideToggle отображается другая форма.

Все отрабатывает корректно до тех пор, пока пользователь не нажимает "Первую кнопку", после новой генерации формы, события внутри ее отрабатывают несколько раз.

Пример:
Сгенерировали форму аяксом, нажали на элемент вызывающий событие внутри формы - все нормально.

Перегенерировали форму ( прошлая форма была удаленна .empty("") ),
нажали на интерактивный элемент внутри, событие вызвалось 2 раза.
Перегенерировали форму ( прошлая форма была удаленна .empty("") ),
нажали на интерактивный элемент внутри, событие вызвалось 3 раза.
Перегенерировали форму ( прошлая форма была удаленна .empty("") ),
нажали на интерактивный элемент внутри, событие вызвалось 4 раза и т.д.


В чем может быть проблема (сам скрипт снизу)?

$(document).ready(function () { 
    // Добавить клиента 
    $("body").on("mousedown", "#addClient", function () { 
        if (event.which == 1) { 
            // Подгружаем необходимые поля 
            $.ajax({ 
                url: "../new_client.php", 
                success: function (data) { 
                    if ($.find(".grid_content_ajax .newClient__wrapper").length != 0) { 
                        $(".grid_content_ajax .newClient__wrapper").remove(); 
                    } 
                    $(".grid_content_ajax").empty().append("<div class='newClient__wrapper' style='display: none;'>" + data + "</div>"); 
                    $(".newClient__wrapper").show("slide", { direction: "left" }, 1000); 
                } 
            }); 
 
            // При фокусе на элемент формы "Добавить клиента" 
            $(".grid_content_ajax").on("focus", ".addClient__input", function () { 
                $(".addClient__item").removeClass("addClient__item_active"); 
                $(this).parent().parent().addClass("addClient__item_active"); 
            }); 
            $(".grid_content_ajax").on("blur", ".addClient__input", function () { 
                $(".addClient__item").removeClass("addClient__item_active"); 
            }); 
 
            // Добавить представителя 
            $(".grid_content_ajax").on("mousedown", "#addAgent", function (event) { 
                if (event.which == 1) { 
                    $( this ).find(".addClient__mark").toggleClass("icon-mark"); 
                    $(".addClient__wrapperAgent").slideToggle(); 
                } 
            }); 
        } 
    }); 
});

Answer 1

Форма новая, а ивенты с привязкой к классам остались. Необходимо либо их сбрасывать, либо учитывать повтор назначения. Либо, что проще, вынести из обработчика бади в инициализацию, например, doc.onready

READ ALSO
Запретить выделение объекта

Запретить выделение объекта

При создании календаря те дни недели, которые не входят в текущий месяц у меня создаются как просто пустые ячейки таблицыНо на эти пустые...

187
Как проверить видимость элемента jquery?

Как проверить видимость элемента jquery?

Привел тестовый пример с сайта для удобстваВроде бы всё норм: нажатие на кнопку корзины и появление счетчика товаров

181
setTimeout и clearTimeout

setTimeout и clearTimeout

При наведении на div c меню, фон вокруг затемняется, но если проводить так много раз, mouseenter & mouseleave из дива, начинает моргатьРешил установить...

179