Changing fill in svg path?

Hi

First: Im sorry if my questions seems stupid but Im completely new at this

I have followed a tutorial that uses a onclick event (set up in illustrator) to chose at path in a svg file and then be able to chang color on that file.

https://www.youtube.com/watch?v=4UEB6gaLKuw

It works perfectly but I want to be able to just directly change the color of different parts without a click event.

ie. one row of color buttons for the hat, one row for the shirt ansd so on.

I have moved the script from the compositionReady to the  button.click and put in the following code:

yepnope({

          load: "http://cdn.edgecommons.org/an/1.0.2/js/min/EdgeCommons.js",

          complete: function() {

                    // Enable SVG access

                    EC.SVG.accessSVG(sym.$("character")).done(

                              function(svgDocument){

                                                  // set color

                                                  $("#hat", svgDocument).css("fill", $(e.currentTarget).css("background-color") );

                              }

                              );

                              }

                   });

And it works! - but only the first time... the rest of the buttons wont do a thing ;(

And I guess its bat practice to load the edgeCommons every time the user intercts, but I havent been able to get it to work when loading in compositionReady.

Hope you can help me

Bonus:

The colorshift of the svg is rather "ugly" - the whole svg file blinks... is it possible to make a smoother transition?