event.preventDefault () non funziona con il button?

Perché è .preventDefault() non funziona o addirittura .preventDefault() alert() sul mio module?

 <div id="popover-head" class="hide">Add new tab</div> <div id="popover-content" class="hide"> <form class="form-inline" id="myForm" method="POST" action="../admin/FLT_add_tab.do"> <div class="form-group"> <!-- my form --> <input type="text" name="newTab"/> <button class="btn btn-primary" type="submit" ><i class="icon-white icon-ok"></i></button> <button class="btn" type="button" onClick="popRemove();" ><i class="icon-remove"></i></button> </div> </form> </div> 

Il codice JS:

 $(document).ready(function() { $('#myForm').on('submit', function(e) { alert("Thank you for your comment!" + e); e.preventDefault(); }); }); 

Non so cosa faccio male.

AGGIORNARE:

link che ha il popover:

 <li><a href="#" id="popover"><i class="icon-plus-sign"></i> Tab</a></li> 

JS che innescano il popover "

 $('#popover').popover({ html : true, title: function() { return $("#popover-head").html(); }, content: function() { return $("#popover-content").html(); } }); 

jsfiddle: http://jsfiddle.net/9uYuH/

Usa .on ()

Poichè i popup nel bootstrap hanno generato elementi dinamici, non è ansible associare gli events direttamente a loro. Quindi è necessario utilizzare la Delegazione events .

 $(document).on('submit','#myform', function(e) { alert("Thank you for your comment!" + e); e.preventDefault(); }); 

o meglio

 $('#popover').on('submit','#myform', function(e) { alert("Thank you for your comment!" + e); e.preventDefault(); }); 

Sintassi

 $( elements ).on( events, selector, data, handler ); 

poiché il popover in bootstrap è generato dynamicmente, è necessario utilizzare la seguente function jquery

 $(document).on('submit','#myform', function(e) { alert("Thank you for your comment!" + e); e.preventDefault(); });