asked on Accessing div created dynamically with JS
Hi
I am using cycle2 to create a carousel of logos.
Seen on this page http://facilitiescollective.com/founding-partners.php
(alongside title "founding partners")
When clicked it drops down some information.
As the carousel loops cycle2 is creating duplicates. The duplicated logos don't drop down information and it appears i cant access them. Any ideas why?
(try clicking the 8th logo which is a duplicate of the 1st for an example of the problem)
Thanks
I am using cycle2 to create a carousel of logos.
Seen on this page http://facilitiescollective.com/founding-partners.php
(alongside title "founding partners")
When clicked it drops down some information.
As the carousel loops cycle2 is creating duplicates. The duplicated logos don't drop down information and it appears i cant access them. Any ideas why?
(try clicking the 8th logo which is a duplicate of the 1st for an example of the problem)
Thanks
jQueryJavaScriptHTML
Last Comment
coolispaul
I can see one problem but I haven't determined if it's THE problem. Whatever code is duplicating the logo containers is also duplicating the ids of those containers causing multiple elements with the same id on the page. That will cause problems on a page where a script is trying to access elements by id.
You are targeting your dropdown by the class (item1,item2 etc) but you have multiple elements with the same class - I'm surprised it's even working properly for the initial logos (before they are replicated)
Your dropdowns should probably have an ID using text1, text2 etc
Then in your js you can target a definitive element by changing
$("."+el).slideDown();
to
$("#"+el).slideDown();
You then should remove the ID from your slideshow logo's.
Your dropdowns should probably have an ID using text1, text2 etc
Then in your js you can target a definitive element by changing
$("."+el).slideDown();
to
$("#"+el).slideDown();
You then should remove the ID from your slideshow logo's.
You should also target your logos with more specificity
Not this way which attaching itself to every div within the container
$("#partners div").on("click", function(){
But this way which only targets the logos
$("#partners .cycle-carousel-wrap .item").on("click", function(){
Not this way which attaching itself to every div within the container
$("#partners div").on("click", function(){
But this way which only targets the logos
$("#partners .cycle-carousel-wrap .item").on("click", function(){
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
thanks chris Stanyon this works great
Would you mind explaining why this works and mine didnt?
Thanks
Would you mind explaining why this works and mine didnt?
Thanks
Normally events are bound to the elements when the page first loads. When your page loaded, the click event was bound to your original logos. Once the carousel starts it duplicates the logos so they can cycle, but the event binding has already taken place, so the duplicated logos won't have the click event bound to them (because they didn't exist at the start).
This is why you need to bind the event to an element that already exists at the start (#partners) and then delegate to the img. That way the event will apply to any images inside #partners irrespective of when they were created.
Glad it worked - binding events to dynamically created elements can be a bit of a gotcha if you're not careful :)
This is why you need to bind the event to an element that already exists at the start (#partners) and then delegate to the img. That way the event will apply to any images inside #partners irrespective of when they were created.
Glad it worked - binding events to dynamically created elements can be a bit of a gotcha if you're not careful :)
ASKER
perfect thanks for your help
ASKER
great explanation also, helping my understanding