mike99c
asked on
JQuery does not recognise AJAX loaded HTML
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:
http://www.dressorganic.co.uk/ajaxscope/noajax.htm
Clicking on the link fires up an alert which is working as expected.
However look at the following example:
http://www.dressorganic.co.uk/ajaxscope/withajax.htm
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.
Let me illustrate this with an example.
The following is what I am trying to achieve without using AJAX:
http://www.dressorganic.co.uk/ajaxscope/noajax.htm
Clicking on the link fires up an alert which is working as expected.
However look at the following example:
http://www.dressorganic.co.uk/ajaxscope/withajax.htm
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here's an article that explains the process and shows a simple example.
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
ASKER
Thanks Rob, I got this working here:
http://www.dressorganic.co.uk/ajaxscope/withonmethod.htm
Before I assign you the solution, can you please explain what this is actually doing and why it is attached to the body?
http://www.dressorganic.co.uk/ajaxscope/withonmethod.htm
Before I assign you the solution, can you please explain what this is actually doing and why it is attached to the body?
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?
Does that make sense?
The jQuery API can explain it better than I can: http://api.jquery.com/on/
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.
ASKER
The final code should be:
$("body").on("click", ".link", function() {
alert("Clicked");
return false;
});
$("body").on("click", ".link", function() {
alert("Clicked");
return false;
});
In otherwords you have a couple of options:
1) Bind the event every time you load html
2) use the Delegate (http://api.jquery.com/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:
Open in new window