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.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s