title: Add onclick to svg path by id
body: <p>Using <a href="https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement">this</a> Stackoverflow question and the first answer, I was able to convert an SVG image to inline svg on document ready. I can also reference its path' elements from CSS to add a hover stroke. </p>
  
  <p>The next thing I am trying to accomplish is add onclick to each path without having to add it to the svg file itself. I assumed since the CSS can identify each path's class, I should also be able to identify each path's ID in javascript as well, but I am having trouble figuring out how. Here's my code: </p>
  
  <pre><code> &lt;body&gt;
          &lt;div id="mapSideBar" class="left"&gt;
          &lt;/div&gt;
          &lt;div id="mapMain" class="left"&gt;
              &lt;img id = "mapImg" src="canada2.svg" class="logo" /&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  </code></pre>
  
  <p>I have the function mentioned in the link above to convert it to inline SVG and my paths have ids - path1, path2, path3 and path4. I tried to add the following to the <code>jQuery(document).ready()</code> function: </p>
  
  <pre><code>var $paths = jQuery(document).find('path');
  $paths.each(function() {
      (this).click(onImgClick((this).id));
  });
  </code></pre>
  
  <p>just to see if I could get a handle on each path, and I cannot. Is there something I am missing, or is there even a way to assign onclick event handlers to each path? </p>
  
  <p>Thank you,
  Rishi</p>