フィルタをリセットしようとしています。ボタンをクリックすると値はクリアされますが、イベントは発生しません

Question

フィルターリセットボタンを作成しています。ボタンをクリックすると、すべての値が正常にクリア/リセットされますが、現在のすべての結果を表示するようにイベントがトリガーされていません。私は上記のフィルタを適用するために、各列のフィルタフィールドにイベントリスナーを持っています。

$('#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"); 
    }); 

わからない私が間違ってトリガ/変更を使用していたり​​、それは使い方だ誤解していますが、私の知る限りでは物事が正しい見れば。

Answer 1

ちょうどあなたのreturn下に移動：

$('#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; 
    }); 
}); 

それが実行するための後のコードをすることはできません。

Answer 2

私は独自のメソッドを持っていたイベントリスナーでフィルタロジックを取り出して、フィールドの値をリセットした後にこれらのメソッドを呼び出しただけです。

$('#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, ''); 
    }); 

意図したとおりに動作します。