title: Event delegation on SVG Elements
body: <p>I am trying to have a common click handler for all the elements I am appending to a SVG canvas. But I cannot delegate the handler to the newly created elements.</p>
  
  <p>This is the code I have tried to delegate, but no luck</p>
  
  <pre><code>$("#floor").on('click','.drawnLine', function() {
      //#floor is the SVG Element
      //.drawnLine is the &lt;line&gt; element that is added dynamically
      console.log($(this).data('index'));
  });
  </code></pre>
  
  <p><strong>Update:</strong>
  On the jQuery manual of <a href="http://api.jquery.com/on/"><code>.on()</code></a> it is mentioned that</p>
  
  <blockquote>
    <p><strong>Note:</strong> Delegated events do not work for SVG.</p>
  </blockquote>
  
  <p>So now the question is any other workaround for this problem?</p>