Using jQuery events on dynamically appended HTML


JQuery has become one of our foundations of processing requests while staying on the same page. No refreshes, simple requests to your backend PHP scripts via AJAX and updating the DOM Modals.

But often times, we’re met with a minor setback that leaves us pondering for hours. This is the second time that its happened to me and I decided to do something about it – write a blog post (how convenient, am i right?).

Lets get started with your code jQuery event.

$(‘.some_class’).on(‘click’, function() { … });

This may work for the DOM that was given when your page loaded but it doesn’t do well for appended content. The fact that you’re possibly using .on for appending dynamically is half of your solution but there’s still one more step left.


The jquery event isn’t firing when I click on edit, unlike the DOM that’s added on page load.

Fortunately, there’s a really quick fix for this. You need to rewrite it as:

$(document).on(‘click’, ‘.some_class’, function() { … });

Apparently jQuery now reads the DOM off the document, where it’s dynamically appended. Unfortunately, I have no idea why the previous method doesn’t work.