title: Onclick on normal button is submitting form
body: <p><strong>SCENARIO</strong></p>
  
  <p>I have a <code>java</code> JSP view with a long form. This was working nice. I can submit my form by pressing enter in any input field or with submit button.</p>
  
  <p><strong>NEW REQUIREMENT</strong></p>
  
  <p>In a part, I must add buttons to replace some <code>&lt;label&gt;</code> for <code>&lt;input&gt;</code> to allow editing, nothing hard.</p>
  
  <p><strong>WHAT I TRIED</strong></p>
  
  <p>This part of the view is created dinamically, cause number of lines depends of the data introduced by user, this parts creates each line:</p>
  
  <pre><code>resultadoHTML += "  &lt;div class='row col-lg-12 col-xs-12' style='margin-bottom: 30px;text-align: left;'&gt;";
  resultadoHTML += "      &lt;label class='col-lg-3 col-xs-12 control-label' &gt;" + nomCalidad + "&lt;/label&gt;";
  resultadoHTML += "      &lt;div class='col-lg-5 col-xs-8'&gt;";
  resultadoHTML += "          &lt;input type='text' class='form-control' value='"+valor+"' id='calidadCatId' maxlength='30' required='true' /&gt;";
  resultadoHTML += "      &lt;/div&gt;";
  
  resultadoHTML += "      &lt;div class='col-lg-2 col-xs-3' id='ccc" + parts[1] + "'&gt;";
  resultadoHTML += "          &lt;label class='control-label' id='unidadCCC" + parts[1] + "' &gt;" + parts[4] + "&lt;/label&gt;";
  resultadoHTML += "      &lt;/div&gt;";
  resultadoHTML += "      &lt;div class='col-lg-2 col-xs-1'&gt;";
  resultadoHTML += "          &lt;button id='eCCC" + parts[1] + "' class='btn btn-default'&gt;&lt;span class='glyphicon glyphicon-plus-sign'&gt;&lt;/span&gt;&lt;/button&gt;";
  resultadoHTML += "      &lt;/div&gt;";
  resultadoHTML += "  &lt;/div&gt;";
  </code></pre>
  
  <p><strong>Resulting HTML of the button</strong></p>
  
  <pre><code> &lt;button id="eCCC5" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p><strong>PROBLEM</strong> </p>
  
  <p>When I use <code>onclick</code> to define a function in the new button, this function is called, but after, the <code>click</code> event of the submit button is <strong>ALSO</strong> called and I dont know why... But as you can see in the code, even when i <strong>DON'T</strong> catch any event in the button the <code>click</code> event of the form is called.</p>
  
  <p><strong>OTHER INFO</strong></p>
  
  <p><em>FORM/BUTTON DEFINITION</em></p>
  
  <pre><code>&lt;form:form class="form-horizontal" role="form" method="post"
      commandName="contratMercan" action="../contratos/contratosubmit"
      name="formulario" id="edicionContrato"&gt;
  
  &lt;button type="submit" class="btn btn-primary" id="edicionContrato"&gt;                               
      &lt;spring:message ... /&gt;  // omitted info 
  &lt;/button&gt;
  </code></pre>
  
  <p><em>SUBMIT FUNCTION</em></p>
  
  <pre><code>$("#edicionContrato").submit(function(e){
      e.preventDefault();
  
      var form = this;
  
      // checks and workarounds...
  
      form.submit();
  });
  </code></pre>
  
  <p>Any idea why could happen? Maybe dinamically introduced <code>HTML</code> code has some mistake and brokes <code>javascript</code> or <code>html</code> after?</p>