'Prevent input.change when clearAll is clicked, isotope filtering
I have setup an isotope filtering with multiple checkbox groups and also a select form. I also added a "clearAll" button underneath the filter groups that clears all checkboxes and reset the select to zero (show all).
I realized that when i click this button, a change event is detected on the checkboxes and the select form, and the $input.change function is executed on the filter groups, which is performance-wise unwise. I just want to apply filter: '*' to my isotope container and not go through all the $input.change(function(){}).
($container = $('#grid')), ($input = $('#filters input, #filters select'));
$checkboxes = $('#filters input');
$select = $('#filters.top-filters select');
$clearAll = $('.clear_all');
$container.isotope({
itemSelector: '.products',
layoutMode: 'fitRows',
});
$input.change(function () {
[...My filtering code...]
});
$clearAll.on('click', function (e) {
e.preventDefault();
$checkboxes.prop('checked', false);
$select.prop('selectedIndex', 0);
$container.isotope({ filter: '*' });
});
Any idea on how I could restrict the $input.change function only to user interaction?
Edit : i tried to wrap the execution with a variable condition, but it still seems to run.
($container = $('#grid')), ($input = $('#filters input, #filters select'));
$checkboxes = $('#filters input');
$select = $('#filters.top-filters select');
$clearAll = $('.clear_all');
$container.isotope({
itemSelector: '.products',
layoutMode: 'fitRows',
});
let execute = true;
if(execute) {
$input.change(function () {
[...My filtering code...]
});
}
$clearAll.on('click', function (e) {
execute = false;
e.preventDefault();
$checkboxes.prop('checked', false);
$select.prop('selectedIndex', 0);
$container.isotope({ filter: '*' });
execute = true;
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
