Why is the jQuery function not working properly?

Question

AJAX

What I do:
I have a user search page, when I click on a user, I show information about him

if($(document).find('.usersforu').length>0){ // проверка ну существование юзеров
getUserInfo_var = false, // false
complaint_var = false; // false
$(document).on('click', '.usersforu', function(){ // при клике на юзера
var username = $(this).find('.ufuName').text(); // создадим переменную с его именем
getUserInfo(username); // вызываем функцию с поиском информации о выбраним юзере, отправляем в php
}

That is, I clicked on the user, created a variable with his name and send data to php

function getUserInfo(username){ // сама ф-ия
if(getUserInfo_var) return false; // если не false, то ничего не делаем
$.ajax({ // запуск ajax
url: '/theme/userMore/userMore.php',  // путь до php
type: 'post', //post
dataType: 'json', //json
data: {username:username}, //data с именем искомого юзера из переменной username, создаваемой при клике на юзера
success: function(json){ //при успехе
if(typeof json.success !== 'undefined'){ // если из php пришло echo json_encode(['success' => '...'],
$(document).find('.innerTwo').empty(); // очистим div, в которой подгружаем инфу о юзере
$(document).find('.innerTwo').html(json.success); // вставим эту инфу
compl(); // вызов ф-ии жалобы на юзера
} else if(typeof json.error !== 'undefined'){
return $.jGrowl(json.error); // а так будем получать ответы с ошибками echo json_encode(['error' => '...'],
}
},
error: function(json, jqXHR, status, errorThrown, exception){
alert(JSON.stringify(json));
return $.jGrowl('ОШИБКА AJAX запроса: ' + status, jqXHR, json);
}
});
}

Now php has loaded the information about the selected user in a div, this div has a button "complain about the user", the function for this button compl () was called in success getUserInfo ();

//жалоба на пользователя
function compl(){ // сама ф-ия
if($(document).find('#complaint').length>0){
usernameTocomplaint = $(document).find('.tuName').text(); //найдем имя пользователя из div, подгруженного первым ajax
$(document).on('click', '#complaint', function(){ // при клике на кнопку "жалоба"
$('#complaintForm').find('input[name="usernameTocomplaint"]').val(usernameTocomplaint); // в скрытый инпут формы вставим имя пользователя для отправки админу
$('#complaintForm').arcticmodal(); // вызовем модальное окно
alert($(document).find('#complaintForm').length); // вот тут интересное начиание проблемы, ниже об этом
});
}

if($(document).find('#complaintBtn').length>0){
$(document).on('click', '#complaintBtn', function(){ // при клике на кнопку "отправить жалобу"
complaintFunc(usernameTocomplaint); //вызовем ф-ию
});
}
}

//жалоба на юзера и его блокировка юзером
function complaintFunc(usernameTocomplaint){ //сама ф-ия
if(complaint_var) return false;
$.ajax({
url: '/theme/complaint/complaint.php',
type: 'post',
dataType: 'json',
data: $('form[name="complaint"]').serialize(), // сериализуем поля формы, их два (скрытое поле с ником юзера на которого жалуются и textarea с причиной жалобы)
success: function(json){
if(typeof json.success !== 'undefined'){ // если успех
complUserHide(); // то вызовем ф-ия, которая спрячет юзера, на которого пожаловались на странице, типа $('#user').hide();
$.jGrowl(json.success);
} else if(typeof json.error !== 'undefined'){
$.jGrowl(json.error);
}
},
error: function(json, jqXHR, status, errorThrown, exception){
alert(JSON.stringify(json));
return $.jGrowl('ОШИБКА AJAX запроса: ' + status, jqXHR, json);
}
});
}

The problem is the following, when I tested php, I saw that any error / success message appears several times, then I wrote exit () at the top of php; , then I went to jquery and found the following:

I clicked on the user, everything is OK, then I clicked "complain", and when I clicked on "complain", I did alert('number of forms complain about the user'); . Alert always shows 1. BUT. Alert will be shown exactly as many times as you clicked on the user, no matter on the same or different ones.

Poke on the user->poke complain->alert 1 time,
Poke on the user of another or the same 2nd time->poke complain->alert 2 times,
Poke on the user of another or the same 3rd time->poke complain- >alert 3 times,
and ad infinitum

Tell me where am I wrong?

Answer 1

Thanks to the answers of the guys, I came to the right idea, in general I decided this:
when I click on a user on the page, I now define a variable
usernameTocomplaint = false;

function compl(){
if(usernameTocomplaint) return false;
usernameTocomplaint = username; // применили уже готовое свойство в новой переменной чтобы два раза один и тот же код не писать
...
}

Everything works like clockwork.
Thank you all for your patience, it is worth a lot

Answer 2

After you make an ajax request, the compl () function is called; in which a new handler is registered each time.

Answer 3

you need to hang events on the class, not on the id and attach them to the container with ajax content, for example

$('.container').on('click', '.btn-class', function () {
 ...
});
$('body').on('click', '.nav-link', function (event) {
 ...
});

then it will not be necessary to hang up events every time