title: event.preventDefault() doesn't work with button?
body: <p>Why is it <code>.preventDefault()</code> doesn't work or even <code>alert()</code> on my form?</p>
  
  <pre><code>&lt;div id="popover-head" class="hide"&gt;Add new tab&lt;/div&gt;
  &lt;div id="popover-content" class="hide"&gt;
      &lt;form class="form-inline" id="myForm"  method="POST" action="../admin/FLT_add_tab.do"&gt;
      &lt;div class="form-group"&gt;
          &lt;!-- my form --&gt;
          &lt;input type="text" name="newTab"/&gt;
          &lt;button class="btn btn-primary" type="submit" &gt;&lt;i class="icon-white icon-ok"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button class="btn" type="button" onClick="popRemove();" &gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
       &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS code:</p>
  
  <pre><code>$(document).ready(function() { 
      $('#myForm').on('submit', function(e) { 
          alert("Thank you for your comment!" + e);
          e.preventDefault();
      });
  });
  </code></pre>
  
  <p>I don't know what am I doing wrong.</p>
  
  <p><b>UPDATE:</b></p>
  
  <p>link that has the popover:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" id="popover"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt; Tab&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>JS that trigger the popover"</p>
  
  <pre><code>$('#popover').popover({ 
      html : true,
      title: function() {
        return $("#popover-head").html();
      },
      content: function() {
        return $("#popover-content").html();
      }
  });
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/9uYuH/" rel="nofollow">http://jsfiddle.net/9uYuH/</a></p>