Rebinding event after an ajax call and you thought you’re doing it right

So I got stuck on this for hours, I had no idea what I did wrong. Before this was working well until this case. What I usually do when rebinding events to an element after an ajax call is:

Basically I make an ajax call to add new elements in my DOM, I thought it was smooth sailing but for some reason this technique stopped working. I had no clue on this warning from Chrome:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check http://xhr.spec.whatwg.org/.

After hours and hours of research I found out that you need to not directly rebind the event to the element, instead you will have to call the document object and rebind the event like:

Hope this helps!