尝试重置过滤器。 单击该按钮将清除值，但不会触发事件

Question

I'm making a filter reset button. When I click the button all values get cleared/reset as expected, but the events aren't being triggered to reset the view to show all the current results. I have event listeners on each column's filter field to apply said filter.

$('#clearFilters').on('click', function () {
  console.log("start clear");
  $('#columnsearch_1').val('').change();      
  $('#columnsearch_2').val('').trigger("change");              
  $('#columnsearch_3 option').prop('selected', function () {
    return this.defaultSelected;
   });
    $('#columnsearch_3').trigger("change");    
    $('#columnsearch_4 input[type=checkbox]:checked').removeAttr('checked').trigger("click");
  });

Unsure if I'm using trigger/change wrong or am misunderstanding it's usage, but as far as I know things look correct.

Answer 1

Just move your return to the bottom:

$('#clearFilters').on('click', function () {
  console.log("start clear");
  $('#columnsearch_1').val('').change();      
  $('#columnsearch_2').val('').trigger("change");              
  $('#columnsearch_3 option').prop('selected', function () {
    $('#columnsearch_3').trigger("change");    
    $('#columnsearch_4 input[type=checkbox]:checked').removeAttr('checked').trigger("click");
    return this.defaultSelected;
  });
});

It doesn't let the code after it to execute.

Answer 2

I ended up taking out the filter logic on the event listeners I had into their own methods and just called those methods after I reset the values in the fields.

$('#clearFilters').on('click', function () {

        $('#columnsearch_1').val('');                        
        $('#columnsearch_2').val('');
        $('#columnsearch_3 option').prop('selected', function () {
            return this.defaultSelected;               
        });
        $('#columnsearch_4 input[type=checkbox]:checked').removeAttr('checked');            
        $('#columnsearch_5').val('');            
        $('#columnsearch_6 option').prop('selected', function () {
            return this.defaultSelected;                
        });
        $('#columnsearch_7 option').prop('selected', function () {
            return this.defaultSelected;                
        });
        $('#columnsearch_8  option').prop('selected', function () {
            return this.defaultSelected;
        });
        $('#columnsearch_9').val('');
        $('##columnsearch_10 input[type=checkbox]:checked').removeAttr('checked');


        Column1Filter(table, '');
        Column2Filter(table, '');
        Column3Filter(table, '');
        Column4Filter(table, '');
        Column5Filter(table, '');
        Column6Filter(table, '');
        Column7Filter(table, '');
        Column8Filter(table, '');
        Column9Filter(table, '');
        Column10Filter(table, ''); 
    });

Behaves as intended.