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!