Jquery prevent default doesn't work in wordpress

Question

I have tried by following code to prevent default of form submitting, but it doesn't work. What is problem to that.

<div class="section-register">
    <form id="registerform" novalidate="novalidate" method="post" action="http://localhost/yify2/wp-login.php?action=register" name="registerform">
        <input id="wp-submit" class="button button-primary button-large" type="submit" value="Register" name="wp-submit">
    </form>
</div>

My script is :

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".section-register").find("#registerform").submit(function(event){
        if(whatever) { 
            event.preventDefault();  
        }  
      });
   });
</script>

I also tried by following code :

<script>
jQuery(document).ready(function() {
    jQuery("#registerform").submit( function(e) {

        e.preventDefault();
    });
});
</script>

Answer 1

If your form is loaded via an AJAX request you will need to bind the event after the form is added to the DOM, or bind it on a static node:

Delegated event binding:

<script>
jQuery(function($) { // Short for jQuery(document).ready(function() {
    // Bind the event to a static node (here I use document). 
    //   The closer to the dynamic node the better.
    // From your code it looks like you might be able to use  
    //   $('.section-register') as the static node.
    $(document).on('submit', '#registerform', function(event) {

        event.preventDefault();
    });
});
</script>