Click once with with Javascript / jQuery

Question

I have the following JS:

jQuery(function($){
  $( "#product_filters_form_sizes_medeiumnnarrow" ).click()
  $('menu.pills').on('click', 'a', function(event){
    $pill = $(this);
    $('form.product_filters_form')
      .find("input[value='"+$pill.data('filterId')+"']")
      .attr('checked', false).trigger('change');
  })
});

It does exactly what I need it do, which is to select '#product_filters_form_sizes_mediumnarrow' only issue is it keeps on clicking and the pages reloads each time.

My questions is: is there a way to only click once?

Thank you and any help would be greatly appreciated.

  <li class="product_filter input required" id="product_filters_form_sizes_input"><fieldset class="choices"><legend class="label"><label>Sizes</label></legend><input id="product_filters_form_sizes_none" name="product_filters_form[sizes][]" type="hidden" value=""><ol class="choices-group"><li class="choice"><label for="product_filters_form_sizes_mediumnarrow"><input id="product_filters_form_sizes_mediumnarrow" name="product_filters_form[sizes][]" type="checkbox" value="medium/narrow"><i class="icon checked-indicator"></i>MEDIUM/NARROW</label></li>

Answer 1

if you need a function that does something once in jQuery it's called one. you're probably looking for:

$('#product_filters_form_sizes_mediumnarrow').one('click');

your problem is probably happening because a reload is happening and this is the line that immediately happens.

so my question to you buddy is what does the click actually do? i guess it's a form submission.