search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

jQuery .data() values are lost in cloned elements #656

Closed ZeeD closed 6 years ago

ZeeD commented 8 years ago

If I have attached some infos to the elements before applying anythingSlider using http://api.jquery.com/data/ I can still retrieve them in the "original" elements; but the library create some "cloned" elements. In these ones, there is no "data" available.

ATM I switched to using attr("data-...", JSON.stringify(...)) instead of data("...", ...) as a workaround, but this inconsistent behavior should be fixed

Mottie commented 8 years ago

Hi @ZeeD!

The data from the slides should only be accessed from the original element. Making a copy of the data on the cloned panels would not be updated if the data on the original panel were modified. It would be best to only target the original panels.

If you shared the code you are using to access the data object, I might be able to help modify it to target the correct panel.

ZeeD commented 8 years ago

Hi. Sorry, but I'm not sure to follow you, maybe if I add some infos you can help me better understand how to apply your reasons to my scenario.

I have a list of clickable items. It's build dinamically from a remote json, which contains a list of object, each of them contains some data (the url of the image to show, a label, and a field that specify the behaviour of the click, with some metadata). At the beginning, I register a "generic" click handler using $().on(); then, after fetching the json I build the list, save for each "<li />" the beaviour field in the data, and "stop". when the user clicks on one of the elements, the generic handler is called, which read the "clicked element data" searching for the beaviour field, then, depending on the values, calls the specific function...

in my scenario I didn't need to "detect" that the user clicked on an "original" item or on a "cloned" one.

I know there are different approaches to handle my scenario (in no specific order, on top of my head I can think to bind directly the "correct" behaviour, or to add a specific class, or to save the data in different ways, as for example with the "attr" trick I talked about in the first comment).

I'm just wondering what is the difference between a "cloned" element and an "original" one... I though they where "just" "full copies", but now I need to know exactly what is cloned e what not...

Mottie commented 8 years ago

Cloned panels should only be displayed to the user for a very short period of time - the animation time - before being replaced by the original panel. Therefore the users should not be interacting with these panels.

When these extra panels are created, they are "shallow" cloned, meaning only the .clone() function is used without including data and event listeners. All form elements are then disabled, and any IDs within the cloned panels are removed.

So, I'm not sure why data needs to be obtained from these cloned panels. If you provided the code you are using, I can help troubleshoot any problems that you might be encountering.

Mottie commented 6 years ago

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.