Question

When I’m using jQuery’s data method normally, there’s no problem. But I want to use it inside a plugin, to save the settings for each element on which it’s applied.

Here’s the problem: It saves the data on each element to which the plugin was applied the first time. For example, I apply the plugin to $('div'), then set some value for $('#div1'), and the same value is set for $('#div2') automatically.

http://jsfiddle.net/sX7AC/1/

This an example Fiddle demonstrating what I mean. Why is this happening? When I try to do the same thing outside of the plugin, it works.

Answer 1

settings is an object. You’re setting the data of all divs using this object. When you call height, you’re changing a field of that object. Thus, the other divs will have their values updated as well… (since their ‘myPluginData’ also refers to the same object)

If you want to store state inside that setting object, I suggest moving the extend command to inside your each (so a different object will be created for each element).

See the updated example