justspree — 2012-07-17T06:31:45-04:00 — #1
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:
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.
justspree — 2012-07-17T07:00:29-04:00 — #2
Thanks for reading people! I managed to got it to work by removing the button variable
chris_upjohn — 2012-07-17T07:17:09-04:00 — #3
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.
justspree — 2012-07-17T07:39:41-04:00 — #4
wow neat!! Thank you very much chris! I've changed to using your .on version.
chris_upjohn — 2012-07-17T07:54:43-04:00 — #5
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/