JQuery does not recognise AJAX loaded HTML

Posted on 2014-09-21
Last Modified: 2014-09-22
When I load HTML using AJAX into a page, the JQuery on that page does not seem to recognise any events on the loaded HTML.

Let me illustrate this with an example.

The following is what I am trying to achieve without using AJAX:

Clicking on the link fires up an alert which is working as expected.

However look at the following example:

The link HTML is loaded using AJAX but the JQuery click event does not seem to trigger when I click on the link.

I know that I can add the JQuery trigger within statement.htm and this would work. However I don't want this and don't understand why the JQuery does not apply to the loaded HTML.
Question by:mike99c
  • 4
  • 2
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40335246
It doesn't apply the event to any objects that are not present when the DOM is loaded.  There used to be the .live / .bind functions but they've since been deprecated in subsequent releases of jQuery.

In otherwords you have a couple of options:

1) Bind the event every time you load html

2) use the Delegate ( function on an element that you know will exist when the DOM loads e.g. the body tag is a good one.  In your case:
$("body").delegate(".link","click", function(){
           return false;

Open in new window

LVL 42

Accepted Solution

Rob Jurd, EE MVE earned 500 total points
ID: 40335322
**Update: .delegate had been replaced by .on but same principle applies and my code above changes to:
$("body").on("click", ".link", function() {...});
LVL 108

Expert Comment

by:Ray Paseur
ID: 40335399
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.


Author Comment

ID: 40335484
Thanks Rob, I got this working here:

Before I assign you the solution, can you please explain what this is actually doing and why it is attached to the body?
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40335719
You've attached the click event to the body element.  When you click the loaded html, the click event starts at the element you've clicked (this DOM tree is essentially passed to jQuery to handle).  This event propagates up from the element that's been clicked and when matched to the selector (".link" in your case) the handler is called.  If you hadn't included the ".link" then it's just a click even on anything within the body element.
Does that make sense?
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40335727
The jQuery API can explain it better than I can:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.


Author Closing Comment

ID: 40336091
The final code should be:

$("body").on("click", ".link", function() {
    return false;

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Example unit tests with AngularJS 3 40
jQuery Parallax 1 38
jquery add something to a div 4 37
Javascript and Jquery not firing 9 39
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now