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:

$( ".element" ).on( 'click', functon() {
  alert( "Hello!" );
} );

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:

$(document).on('click', '.element', function () {
  // it works!
});

Hope this helps!