title: How to add event listeners to objects in a svg?
body: <p>I would like to create a web page displaying an interactive svg: since several svg may be used, the various objects displayed will have different IDs, so the event listeners (to catch a mouse click, for example) have to be dynamic.</p>
  
  <p>Starting from <a href="https://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript/3379830#3379830">this snippet</a></p>
  
  <pre><code>var a = document.getElementById("alphasvg");
  a.addEventListener("load",function(){
          var svgDoc = a.contentDocument;
          var delta = svgDoc.getElementById("delta");
          delta.addEventListener("click",function(){alert('hello world!')},false);
      },false);
  </code></pre>
  
  <p>I would like to find a way to cycle through all the objects of the svg (maybe having a particular class) and attach an even listener to them.</p>
  
  <p><strong>update</strong></p>
  
  <p>So JQuery 'each' function may be a suitable option, but it seems that JQuery doesn't handle the svg DOM so well. Is there any other available option? (like a JQuery plugin?)</p>