title: jQuery click bind for dynamically created buttons: whole div reacts to a click
body: <h2>I create a DIV dynamically:</h2>
  
  <pre><code>        shareVisual = '&lt;div class="individual-share"&gt;' + '&lt;input type="number" value="1" /&gt; X ' + classname.val() + '@' + classcurrency.val() + ' ' + classprice.val() + ' per share ' + '&lt;button type="button" class="remove-share"&gt;Remove&lt;/button&gt;&lt;/div&gt;';
          listOfSharesBox.append(shareVisual);  
  </code></pre>
  
  <hr>
  
  <p>Then add a bind to the parent div:</p>
  
  <pre><code>$("#list-of-shares").bind('click', '.remove-share', function(e) {
      $(e.target).closest("div").remove();
  })
  </code></pre>
  
  <p>Problem: the div gets removed when any part of the dynamically generated DIV is clicked. I need this to work only when button is clicked. What do i need to change?</p>