append() removes all data when used on multiple elements

[thesaint]

When a fragment with data is created and it is appended with "append()" to multiple elements, the fragment is inserted without the data (thus, event handlers are also wiped). "appendTo()" doesn't show this behavior. Also, when "append()" is used for a single element, the data isn't lost. See the attached file.

[dmethvin]

I can see how this would happen, since the elements have to be cloned to append to multiple locations. Were you expecting to see the data cloned into new separate objects that would be associated with the elements? Or would you expect the elements to all share the original common data object?

[thesaint]

Hmm, firstly I expected the data to be there at all :-)

Here are my thoughts: The most important use case for data are bound events. From a memory perspective it seems better to me when the event handler is shared across all elements. And at the moment I can't think of a scenario where cloned event handlers are more useful than shared event handlers. What happens when you call .bind() on multiple elements, is the handler cloned? What's the behavior of appendTo()? I think consistency is a good thing here.

[snover]

Resetting milestone to future.

[dmethvin]

I guess this is a case of two cases that look similar justifiably doing very different things.

For the case $("#elem1").appendTo("#elem2") I think we *want* to have everything preserved; we are just moving #elem1 to another point in the DOM tree. For example you might move an option element between two select boxes.

For $("#elem1").appendTo(".lotsaElems") I am less confident. (For one, if it were truly an element with an id you've created an invalid document but let's ignore that for a second.) I can see a strong case for cloning the attached data (and thus the events as well).

[danheberden]

Seems to be working properly - ​http://jsfiddle.net/danheberden/EKB4x/