Having Issue on Using Data Attributes with jQuery and Raphaël.js

Having Issue on Using Data Attributes with jQuery and Raphaël.js

Can you please take a look at This Demo  and let me know why I am getting following errors while I can get access to `data-prov` by using the ` var prov = $(this).data("prov");`




This works when I hard code the snippet like:
  1. $(this).hover(function(){
  2.             BC.attr({fill: "#ccc" });
  3. }, function(){
  4. BC.attr({fill: "#000" });
  5. });
but using the

  2. jQuery('ul li').each(function(){
  3. var prov = $(this).data("prov");
  4. $(this).hover(function(){
  5.             console.log(prov);
  6. prov.attr({fill: "#ccc" });
  7. }, function(){
  8. prov.attr({fill: "#ccc" });
  9. });
  10. });
is causing the errors. As you can see the console is logging the correct value of the list but why the error is happening?!

Thanks