Javascript custom event fire from a function with returning false

Question

I have following form code, and I have to prevent the form submission and after firing a custom event. I have also written a Javascript on submit function triggering that event and then return false. Please help if I am doing wrong.

form html:

   <form class="form-inline" action="" name="filterform">
      <div class="row">
        <?php foreach($formatted_post_type as $filters){?>
        <div class="checkbox">
          <label class="checkbox-inline" style="line-height:40px;">
            <input type="checkbox" name="filters[posttype][]" value="<?php echo $filters['slug']?>" onclick="refresh_posttypes();" />
            <?php echo $filters['name']?></label>
        </div>
        <?php }?>
      </div>
      <div class="row">
        <div class="col-md-12">
          <input type="submit" class="btn btn-primary btn-sm" value="Apply">
        </div>
      </div>
    </form>

javascript code:

jQuery(document).ready(function(){
  jQuery('form[name="filterform"]').on('submit', function(e){
      jQuery(document).triggerHandler('favorites-update-all-lists', function(e){
           e.preventDefault();
    });
    return false;
    });
  });

Answer 1

try with this

$(function() {

    $('form[name="filterform"]').on('submit', function(e) {
        $(document).triggerHandler('favorites-update-all-lists', function() {
            e.preventDefault();
        });
    });

});

you are using e in both anonymous functions

Answer 2

Try moving e.preventDefault(); right after the submit handler:

jQuery(document).ready(function(){
  jQuery('form[name="filterform"]').on('submit', function(e){
      e.preventDefault();

      jQuery(document).triggerHandler('favorites-update-all-lists', function(e){

      });
    return false;
    });
  });