Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Accessing div created dynamically with JS

Posted on 2014-01-14
8
Medium Priority
?
287 Views
Last Modified: 2014-01-16
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
0
Comment
Question by:coolispaul
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39780492
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780515
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780578
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(){
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39782138
Drop the item1, item2 classes etc. from the logo containers as well as the IDs. Add a data attribute to the logos themselves (call it panel for example) containing the class of the element you want to slide, and then bind the click event to the images rather than the DIVs. Because they're dynamically created you need to delegate the event to something that exists on page load (#partners for example)

<div class="item"><img data-panel="item1" src="/admin/resources/pgsfinal2.jpg" /></div>
<div class="item"><img data-panel="item2" src="/admin/resources/miltonabbeyfinal2.jpg" /></div>
<div class="item"><img data-panel="item3" src="/admin/resources/kimboltonfinal2.jpg" /></div>

Open in new window

Then your jQuery would just need to grab the panel data attribute from the clicked image

$("#partners").on("click", ".item img", function() {
   var el = $(this).data('panel');
   $("#partners .text").slideUp();
   $("."+el).slideDown();
   ...

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39785235
thanks chris Stanyon this works great

Would you mind explaining why this works and mine didnt?

Thanks
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39785250
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 :)
0
 

Author Comment

by:coolispaul
ID: 39785266
perfect thanks for your help
0
 

Author Closing Comment

by:coolispaul
ID: 39785268
great explanation also, helping my understanding
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

824 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