title: e.preventDefault() not working
body: <p>I have a table which rows are generated with a click event of an  element. Now, this works perfectly, the problem is with the delete part. For example I have already added 5 rows, when I click the delete button (the delete button is created through jQuery too on the addRow() click event), all rows added through the jQuery function are being deleted and the form is submitting event though I have an e.preventDefault() method called.</p>
  
  <p>JavaScript/jQuery code:</p>
  
  <pre><code>        var counter = 2;            
          window.addRow = function addRow() {
              var newRow = $('&lt;tr&gt;&lt;td&gt;&lt;label&gt;'+ counter +'&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td valign="top"&gt;&lt;input type="text" name="txtOwner' + counter + '"/&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="delete"&gt;delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
              counter++;                
              $('table.actionsteps-list').append( newRow );
          }
  
          $('table.actionsteps-list').on('click', '.delete', function(e){ 
            e.preventDefault(); // stops the page jumping to the top
            $(this).closest('tr').remove();
          });
  
  
          function postForm() {
              var form = document.getElementById('actionStepsForm');
              document.getElementById('rowCount').value = counter-1;
              form.submit();
          }
  </code></pre>
  
  <p>HTML Code (the form itself):</p>
  
  <pre><code>&lt;form name="actionStepsForm" id="actionStepsForm" action="add_reprocessing.php?action=add" method="post"&gt;
  &lt;table class="actionsteps-list" width="510"&gt;
          &lt;tr&gt;
              &lt;th colspan="3" align="left"&gt;Action Steps&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Step #&lt;/td&gt;&lt;td&gt;Action Step&lt;/td&gt;&lt;td&gt;Owner&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label&gt;1&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"&gt;&lt;/textarea&gt;
              &lt;/td&gt;
              &lt;td valign="top"&gt;
                  &lt;input type="text" name="txtOwner1" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table width="510"&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;&lt;a href="#" title="" onclick="addRow(); return false;"&gt;Add Action&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input type="button" value="Create" onclick="postForm(); return false;" /&gt;
  &lt;input type="hidden" value="" id="rowCount" name="rowCount" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Believe it or not, I've been stuck here for almost 3 days now. I can't find any fix online.  I don't what's wrong. </p>