Ignoring ajax request

Hi, first of all, I want to apologize if my question isn't right for this forum.
I am currently working on a project which consists of a chatting website similar to google hangouts. I created a form in javascript destinated to write someone's name in and add him as a friend. I did that yesterday with an ajax request for the server-side and it worked just fine, but now it is ignoring my function and I don't know why.

My js code:

let body = document.getElementsByTagName("body")[0];

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

let addFriendForm = document.createElement("form");
addFriendForm.id = "FriendForm";

// The main problem is here

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

Comments

[Brookes]

Your URL looks suspicious. That looks like a file path, not an endpoint.

[Alex]

Hmm, I don't know, I think that the URL is correct. I am not receiving any errors in the browser. You can take a look at my repository github.com/Alex-dev02/letschat, the js code is in main js and the function is in Functions folder.

[Alex]

The problem is that it is ignoring the ajax request at all, no errors, I even tried to console.log a "Hi" message after $('#FriendForm').submit(function(){ and it didn't work.

[Brookes]

It looks like you're querying with JQuery too soon. You haven't yet appended it to the DOM when you're trying to add the submit method to it.

[Alex]

Oh, I didn't think about that. I ended up by creating that form directly in html and query with jQuery. Now it's fine :). Thank you for the answer.