jquery - How to prevent form from submitting when within bootstrap popover? -

i'm experiencing issue hope can clarify. i'm using bootstrap popover trigger login form. validate user , password using ajax, i'm not able prevent default submit event form event using preventdefault() , stoppropagation().

find code below see can give me hand , know going on. in advance.

notes:

1) popover trigger element id="signin_popover_trigger" 2) popover content html code within class="signin_popover_content"

html code:

<a href="javascript:void(0)" id="signin_popover_trigger" class="popover_trigger" data-name="signin" data-toggle="popover">sign in</a> <div class="signin_popover_content">     <div class="signin_wrapper">         <form class="user_access_form" method="post">         <h4 class="blue weight-bold">sign in</h4>         <label class="grey weight-normal">email:</label>         <input type="text" name="user_email" class="form-control margin-bottom">         <label class="grey weight-normal">password:</label>         <input type="password" name="password" class="form-control margin-bottom">         <input type="submit" class="btn btn-info margin-top user_access_submit" name="sign_in_submit" value="sign in">         </form>     </div> </div> 

javascript code:

$('.user_access_form').submit(function(event){     event.stoppropagation();     event.preventdefault();     //validation code here });   $('#signin_popover_trigger').popover({     html: true,     content: function(){         return $('.signin_popover_content').html();     },     placement: 'bottom',  }); 

css code

.signin_popover_content {     display: none; } 

the fact form stopped correctly if it's not put popover.

thank you!!!

i discovered answer. bootstrap popover doesn't allow add event listener. workaround following:

$(document).on('submit', '.popover .user_access_form', function(event) {      event.preventdefault();      //code here }); 

thanks mrcode providing answer. cheers.