Solved

JavaScript not working with jQuery .load() dynamic content

Posted on 2011-03-22
5
257 Views
Last Modified: 2013-11-19
I am making a site that calls data in from another location using the jQuery .load() event. However, the content that has been brought in cannot interact with the JavaScript currently on the page.

In the below page, I have programmed it to to load content based on the anchor link that is clicked or what is loaded in from the address bar in a browser.

This works fine for all the static links on the page but NOT the links that have been loaded dynamically.

Is there a way to get my code to see the links in the dynamic data that has been imported?


http://ag-chartered-accountants.com/dynamic/what.php#it-solutions

Called in from

http://ag-chartered-accountants.com/dynamic/what-cms.php

(view source to see code)

Also, is there a way to load both the HTML and JavaScript into a DIV using jQuery?

Many thanks,

Mark
0
Comment
Question by:INeedHelp
5 Comments
 
LVL 4

Accepted Solution

by:
chuckalicious earned 500 total points
ID: 35197312
Ok, I suggest you look at the "live" event http://api.jquery.com/live/

Telling jQuery to do something live means it will do it to all current AND FUTURE elements, which should overcome your issues with jQuery not seeing the new elements in the DOM.

Alternativelty, if you know what you are going to be loading into the page and what you'll want to interract with, you can be more specific and use the "bind" function of jQuery to bind functions to the newly added elements.

As for your second question, I'm not sure how you would do that, and I'm also not sure if it's a good idea.
0
 
LVL 1

Author Comment

by:INeedHelp
ID: 35198244
Thanks that works a treat.

The odd thing is I had already tried this, I must have done something wrong somewhere. Your comment gave me confidence that I was on the right track, so now I've gone back and done it again properly and it's working great :o)

Thanks again

Mark
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39650323
Please note the .live event handler has been superseded by the .on event handler
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

707 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

17 Experts available now in Live!

Get 1:1 Help Now