title: d3 circle .on("click") event not firing
body: <p>I understand it should be as simple as selecting the element you need and applying the call to it, but in my case, nothing is happening when I do so.</p>
  
  <p>In my case, I need to re draw circles based on a zoom level of a map.</p>
  
  <p>If the zoom level is &lt; a certain number, use dataset A for the circles. 
  If the zoom level is > the number use dataset B to draw the circles.</p>
  
  <p>I can draw the circles fine, and they do change on changing of the zoom level, but when I add an <code>.on("click")</code> event to these though, nothing happens.</p>
  
  <p><strong>Here is a Codepen link showing the lack of click event working <a href="http://codepen.io/alandunning/pen/yNogme?editors=101" rel="nofollow">CODEPEN LINK</a></strong></p>
  
  <p><strong>Here is the code</strong> I am using, I have a feeling I am doing something wrong in the <code>update()</code> function, and the way I am using the <code>.remove()</code> function:</p>
  
  <pre><code>L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw';
  var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([53.4072, -2.9821], 14);
  
  var data = {
    "largeRadius": [{
      "coords": [53.3942, -2.9785],
      "name": "Jamaica Street"
    }, {
      "coords": [53.4073, -2.9824],
      "name": "Hood Street"
    }],
    "smallRadius": [{
      "coords": [53.4075, -2.9936],
      "name": "Chapel Street"
    }, {
      "coords": [53.4073, -2.9824],
      "name": "Hood Street"
    }]
  };
  
  // Sort data for leaflet LatLng conversion
  data.largeRadius.forEach(function(d) {
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
  });
  data.smallRadius.forEach(function(d) {
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
  });
  
  var svg = d3.select(map.getPanes().overlayPane).append("svg");
  
  var g = svg.append("g").attr("class", "leaflet-zoom-hide");
  
  var circles = g.selectAll("circle")
    .data(data.smallRadius)
    .enter().append("circle");
  
  function update() {
    circles.remove();
    translateSVG();
  
    var dataInstance;
    var radius;
  
    if (map.getZoom() &lt; 17) {
      dataInstance = data.largeRadius;
      radius = 0.008;
    } else {
      dataInstance = data.smallRadius;
      radius = 0.001;
    }
  
    dataInstance.forEach(function(d) {
      d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
    });
  
    circles = g.selectAll("circle")
      .data(dataInstance)
      .enter().append("circle")
      .attr("id", function(d) {
        return d.name
      })
      .attr("cx", function(d) {
        return map.latLngToLayerPoint(d.LatLng).x
      })
      .attr("cy", function(d) {
        return map.latLngToLayerPoint(d.LatLng).y
      })
      .attr("r", function() {
        return radius * Math.pow(2, map.getZoom())
      });
  }
  
  function translateSVG() {
    var width = window.innerWidth;
    var height = window.innerHeight;
  
    var regExp = /\(([^)]+)\)/;
    var translateString = regExp.exec(document.querySelector(".leaflet-map-pane").attributes[1].nodeValue);
    var translateX = parseInt(translateString[1].split(" ")[0]);
    var translateY = parseInt(translateString[1].split(" ")[1]);
  
    if (translateX &lt; 0) {
      translateX = Math.abs(translateX);
    } else {
      translateX = -translateX;
    }
    if (translateY &lt; 0) {
      translateY = Math.abs(translateY);
    } else {
      translateY = -translateY;
    }
  
    svg.attr("width", width);
    svg.attr("height", height);
    svg.attr("viewBox", function() {
      return translateX + " " + translateY + " " + width + " " + height;
    });
    svg.attr("style", function() {
      return "transform: translate3d(" + translateX + "px, " + translateY + "px, 0px);";
    });
  }
  
  // THIS IS THE CLICK EVENT THAT DOES NOT WORK
  circles.on("click", function () {
    alert("clicked");
  })
  
  map.on("moveend", update);
  update();
  </code></pre>