title: Bind click event to inline SVG element with external JS
body: <p>I'm working on creating an interactive map, and at a bit of a road block. What I need to happen is based on what element is clicked in the SVG img, a tooltip window should appear with information about that particular marked spot. </p>
  
  <p>Right now though, I can't even get any of the markers to respond to a click event. Below is the code I am working with. Once the click event is actually responding, I'll be off and running. I'm just stuck as to why this click event is not responding (and getting pretty frustrated as a result). </p>
  
  <p>I've read through this SO post in hopes of understanding why the click responses aren't happening: <a href="https://stackoverflow.com/questions/35783441/include-svg-files-with-html-and-still-be-able-to-apply-styles-to-them/35788464#35788464">Include SVG files with HTML, and still be able to apply styles to them?</a> as well as several others with no resolution being applicable to this scenario. The SVG is being inlined properly, the hover event set by the CSS is happening, it's just the click event that is not occurring. Any help will be greatly appreciated!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
   &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;TITLE&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
          &lt;link rel="stylesheet" href="{$url}/css/style.css"&gt;
          &lt;link rel="shortcut icon" href="{$url}/favicon.ico" type="image/x-icon"&gt;
          &lt;link rel="icon" href="{$url}/favicon.ico" type="image/x-icon"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img src="{$url}/images/3d-map.svg" id="3d-map" class="svg"&gt;
  
           &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
           &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
           &lt;script src="{$url}/js/scripts.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code> $(document).ready(function(){
       /*
        * Replace all SVG images with inline SVG
        */
  
       $('img.svg').each(function(){
       var $img = $(this);
       var imgID = $img.attr('id');
       var imgClass = $img.attr('class');
       var imgURL = $img.attr('src');
  
       $.get(imgURL, function(data) {
          // Get the SVG tag, ignore the rest
          var $svg = $(data).find('svg');
  
          // Add replaced image's ID to the new SVG
          if(typeof imgID !== 'undefined') {
              $svg = $svg.attr('id', imgID);
          }
          // Add replaced image's classes to the new SVG
          if(typeof imgClass !== 'undefined') {
              $svg = $svg.attr('class', imgClass+' replaced-svg');
          }
  
          // Remove any invalid XML tags as per http://validator.w3.org
          $svg = $svg.removeAttr('xmlns:a');
  
          // Replace image with new SVG
          $img.replaceWith($svg);
  
       }, 'xml');
   });
  });
  
  $(window).load(function(){
      $(".exchange-marker").bind('click', function(e){
          console.log('clicked');
          console.log($(this).attr('id'));
      });
   });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.exchange-marker:hover{
      stroke: #fabf23;
      stroke-width: 3;
      transition: all 0.3s;
  }
  </code></pre>
  
  <p>SVG (truncated for brevity):</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1400" height="1200" viewBox="0 0 1400 1200"&gt;
      &lt;g id="markers" fill="#2876BC"&gt;
          &lt;ellipse id="exchange-1" class="exchange-marker" cx="963.8" cy="853.7" rx="14.9" ry="4.8"/&gt;
          &lt;ellipse id="exchange-2" class="exchange-marker" cx="929.3" cy="833.1" rx="14.9" ry="4.8"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>