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.

undynamically

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.

 

Read

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s