Solved

JavaScript not working with jQuery .load() dynamic content

Posted on 2011-03-22
5
273 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)

808 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