How to attach hover to SVG path?
<p>I'm dynamically drawing svg shapes and I need to attach hover and click listeners to the elements. For some reason I can't get it to work.</p>

<p>I'm creating the svg like this:</p>

<pre><code>function svgCreator(){
var objectName = this.name;
$('#container').append('&lt;svg&gt;&lt;path class="overlay" id="path_' +objectName +'"d="M5,723,5,716,205,612,226,717" /&gt;&lt;/svg&gt;')
}
</code></pre>

<p>later I try to attach hover and click events:</p>

<pre><code>function svgHover(){ //svgHover is a method of a generic object
var hotspotObject =this; //hotspotObject is storing the current object as a variable 
this.hotspotSvg.hover( //hotspotSvg is simply $('#path_' +this.name);
    function() { 
    alert('hovering');
    }, 
    function() { 
    $("#outlines").hide();
    }
).click(function() {

alert('You clicked me');
});

};
</code></pre>

<p>EDIT:
The problem got solved, it wasn't because of the svg at all but because I was attaching the event listener incorrectly. I made the mistake of blaming the svg since that is something totally new I'm trying. </p>
