title: JQuery + SVG object: Capture click event properly
body: <p>Ok, i'm trying to capture click events on menu items</p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li class="active left" id="profileLink"&gt;
          &lt;object type="image/svg+xml" data="public/img/nav/profile.svg"&gt;    
                  &lt;img src="public/img/nav/profile.png" alt="Blue Square"/&gt;     
          &lt;/object&gt;
      &lt;/li&gt;
      &lt;li class="left" id="suggestionsLink"&gt;
          &lt;object type="image/svg+xml" data="public/img/nav/suggestions.svg"&gt;    
                  &lt;img src="public/img/nav/suggestions.png" alt="Blue Square"/&gt;     
          &lt;/object&gt;
      &lt;/li&gt;
      &lt;li class="right" id="settingsLink"&gt;
          &lt;object type="image/svg+xml" data="public/img/nav/settings.svg"&gt;    
                  &lt;img src="public/img/nav/settings.png" alt="Blue Square"/&gt;     
          &lt;/object&gt;
      &lt;/li&gt;
      &lt;li class="right" id="statisticsLink"&gt;
          &lt;object type="image/svg+xml" data="public/img/nav/statistics.svg"&gt;    
                  &lt;img src="public/img/nav/statistics.png" alt="Blue Square"/&gt;     
          &lt;/object&gt;
      &lt;/li&gt;
  
      &lt;li class="middle" id="friendsLink"&gt;
          &lt;object type="image/svg+xml" data="public/img/nav/friends.svg"&gt;    
                  &lt;img src="public/img/nav/friends.png" alt="Blue Square"/&gt;     
          &lt;/object&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here's the script i'm using:</p>
  
  <pre><code>    $("#wrapper").on("click", '#friendsLink', function(){
         console.log('test');
         loadFriends();
      });
  </code></pre>
  
  <p>When i use the script to select a plain a-tag it works just fine, but on this svg object it doesn't work at all. Note that it does work when clicking on the padding area of the li-element. but not when clicking in the svg-image area.</p>
  
  <p>A post in this thread suggests the svg dom is different from the html dom and thus jquerys events fail.</p>
  
  <p><a href="https://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible">jQuery Selector + SVG Incompatible?</a></p>
  
  <p>What is the way to go when trying to handle click events on svg elements?</p>
  
  <p>Help is seriously appreciated</p>