title: jQuery: remove the closest <tr> with a dynamically added button
body: <p>i am unable to remove a row in table using dynamically generated buttons.
  The main problem is that the "alert()" does not work.
  How do i catch the 'click' event?</p>
  
  <p>jQuery:</p>
  
  <pre><code>$("#officers-table").on('click', '.remove-officer-button', function(e) {
      var whichtr = $(this).closest("tr");
  
      alert('worked'); // Alert does not work
      whichtr.remove();      
  });
  </code></pre>
  
  <hr>
  
  <p>HTML/PHP (updated the code)</p>
  
  <pre><code>&lt;table id="officers-table" class="ui-widget ui-widget-content"&gt;
  &lt;?php if($num_officers &gt; 0): ?&gt;
      &lt;thead&gt;
        &lt;tr class="ui-widget-header "&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Director&lt;/th&gt;
          &lt;th&gt;Shareholder&lt;/th&gt;
          &lt;th&gt;Secretary&lt;/th&gt;
          &lt;th colspan="2"&gt;Options&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;?php endif; ?&gt;
  &lt;tbody&gt;
  &lt;?php foreach ($officers as $item): ?&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;?=$item-&gt;name?&gt; &lt;?=$item-&gt;lastname?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$item-&gt;is_director?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$item-&gt;is_shareholder?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$item-&gt;is_secretary?&gt;&lt;/td&gt;
      &lt;td&gt;Edit&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" value="&lt;?=$item-&gt;id?&gt;" class="remove-officer-button"&gt;Remove&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;     
  &lt;?php endforeach; ?&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>