Hi, I just created a simple button plugin with jQuery and met a little issue which I can’t figure out where is the problem. What the plugin does is, it will create buttons based on a div title attribute, for example:
<div title=“button1|button2|button3”>
So in this case, 3 buttons will be created. The plugin will also add in mouse events (hover, mousedown, etc) to addClass/removeClass for each button. But the issue here is whenever I mouseover button1 or button2, only button3 seems to have the mouse event registered.
An example can be view here:
Any help is greatly appreciated.
Thanks for reading people! I managed to got it to work by removing the button variable 
Good to hear you got it working but i found a lot of room for improvement such as assigned events using the .on() method which uses event delegation and considered best practice when using jQuery, see the following fiddle which i update from your link so you can see the improvements.
wow neat!! Thank you very much chris! I’ve changed to using your .on version.
No problem, i just realized I may a very tiny mistake though which didn’t allow one of the spans to append to the button. See the updated link http://jsfiddle.net/chrisupjohn/bEcD2/5/