title: D3 events - How to allow button click in d3 element?
body: <p>I have a SVG rendering of all the counties in the US.  Each path has four events bound to it:</p>
  
  <pre><code>click : opens up tooltip graphic with three buttons
  dblclick : executes zoom effect
  mouseover : shows tooltip with county/state data, changes fill
  mouseout : returns fill to original
  </code></pre>
  
  <p>My issue is that I want to differentiate between a click event for the map which opens up the tooltip with buttons, and the buttons inside that tooltip.</p>
  
  <p>I create the tooltip via</p>
  
  <pre><code>thisObj._tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
  </code></pre>
  
  <p>and the map is created via </p>
  
  <pre><code>d3.json("/static/js/json/us-counties.json", function(json){
  
    thisObj._svg.selectAll("path")
      .data(json.features)
      .enter().append("path")
      .attr("d", thisObj._path)
      .attr("class", "states")
      .attr("id", function(d){
        return d.id;
      })
      .style("fill", "gray")
      .style("stroke", "black")
      .style("stroke-width", "0.5px")
      .on("click", mapClick)
      .on("dblclick", mapZoom)
      .on("mouseover", mapMouseOver)
      .on("mouseout", mapMouseOut);
  });
  </code></pre>
  
  <p>My mapClick handler is </p>
  
  <pre><code>var mapClick = function(d, i){
  
      if (thisObj._tooltipOpen){
  
          if ($(".button").is(":checked")){
  
              console.log($(this).attr("id") + " was clicked");
  
          } else {
  
              console.log("Close tooltip click recorded");
              thisObj._tooltip.transition()
                  .duration(500)
                  .style("opacity", 0);
  
              thisObj._tooltipOpen = false;
  
              mapMouseOut(d);
          }
  
      } else {
          console.log("Open tooltip click recorded");
  
          //tooltip template in html, want to handle a button click on these buttons
          var template = "&lt;div id = 'tooltip_template'&gt;" + 
              "&lt;div class = 'county_data'&gt;" + d.name + ", " + d.properties.StateCode + "&lt;/div&gt;" +
              "&lt;button id = 'add_prospective_market' class = 'button'&gt;Prospective Market&lt;/button&gt;" +
              "&lt;button id = 'add_market' class = 'button'&gt;Market County&lt;/button&gt;" +
              "&lt;button id = 'remove_market' class = 'button'&gt;Remove Market&lt;/button&gt;&lt;/div&gt;";
  
          thisObj._tooltip.html(template)
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY + "px"));
  
          $(".button").button();
  
          thisObj._tooltip.transition()
              .duration(1000)
              .style("opacity", .8);
  
          thisObj._tooltipOpen = true;
      }
  }
  </code></pre>
  
  <p>I have a button handler instanciated via</p>
  
  <pre><code>$("#add_market").on("click", function(){
     console.log("Add Market button clicked");
  }
  </code></pre>
  
  <p>but it is never activated, and the only logging I get is the tooltip open/close notifications.  Given this code, how can I modify the click handler to differentiate between a button click and a non-button click?</p>