[RESOLVED] Ajax dynamic content can't reference document classes or objects
I need a bit of help if possible? I've got a pretty good knowledge of websites, JS, etc.. and I've been playing with AJAX for dynamic content within divs on my pages to keep away from refreshing entire pages, etc..
My website is for my photography. I have a static gallery (php) page within which I populate 1 DIV with dynamic html (an image tag, a few links, text, etc..) this works without fail.. Also... in this static page I have a DIV called AITrigger which is a simple CSS rollover image and tied to a jquery.click event to popup a div to present a purchase photo window. This works too..
BUT I want the clickable AITrigger in the dynamic section since it varies in parameters, etc... so the AITrigger definition is in a CSS file, the query references to it are in the static gallery page and the actual AITrigger div is presented via AJAX.
When I move the DIV AITrigger into the ajax callback and the AJAX presents the DIV dynamically then the jquery in the local document doesn't work. in fact I can use anything - doesn't have to be jquery, I've used bump box, lightbox, standard <A> tags, etc.. and none of them work once the call is made from the ajax code. move the code back onto the main document and it works..
From my limited knowledge of the document structure I was thinking that the AJAX code doesn't exist at the time the main document is put together, therefore when the ajax code and links arrive they can't see the document or its content to call or reference them.
Have I made sense here? its been bugging me for ages and I hoped someone could point me in a rough direction that I can figure out whats going on..
the ajax content is loaded by a standard callback and pushed into a DIV. It will contain a few html tags but also a DIV with an ID of aitrigger
The static page has the class and jquery definitions for the div aitrigger. its job is to simply display a pop up div when clicked.
When the ajax content is shown it displays normally and the trigger div is visible but when the div is clicked the jquery.onclick does not fire. nothing happens in fact.
if the exact same code is placed on the static document it works. I've also tried this before with the ajax div calling a class such as bumpbox or mootools popups they also don't work if the trigger div is displayed via ajax. but put the div on the static document and it works!
my thoughts were something along the lines of the ajax content being blind to the document structure?? and/or the jquery trying to attach itself to an element which doesn't exist before the ajax puts it on the page!?
Ok, so what you've just done will work only for static content. the jQuery script you are using applies the behaviour only to already existing elements... It means it just search for the matching element when after the page is loaded and that's it.
Now, when you replace the part of content of a document and that content holds some element the script was applied to, you need to apply the script again. Because the elements are gone - doesn't matter if the IDs match... they are all fresh and their behaviour has to be set again.