Ajax表单提交被忽略

Question

I am currently working on a project which consists of a chatting website. I have a form(for adding some as a friend through his name) created in javascript and I want to submit it through ajax, but my ajax submission is ignored at all. It is strange because, with a day before it was working correctly, after the submission, I checked the database and everything was fine. The next day, when I woke up and tested again the form it was broken and a URL was displayed in the URLs place :)) despite the fact that I used ajax. I got no response from the database because the submitting function was ignored. What should I do? Here is my project https://github.com/Alex-dev02/letschat the problem is in the main.js file which is attached to index.php. My main.js content:

let mainList = document.createElement("div");
mainList.classList.add("mainList");

let addFriendForm = document.createElement("form");
addFriendForm.id = "FriendForm";
// my ajax submision
$('#FriendForm').submit(function(){
  $.ajax({
    url: '../letschat/Functions/createUserRelation.php',
    type: 'POST'
  });
});

let addFriendField = document.createElement("input");
addFriendField.classList.add("addFriend");
addFriendField.placeholder = "Add a friend";
addFriendField.type = "text";
addFriendField.name = "addFriend";
addFriendField.autocomplete = "off";
addFriendForm.appendChild(addFriendField);

mainList.appendChild(addFriendForm);

body.appendChild(mainList);