Function only runs on latest elements it was called on

Question

I have a function that is run on a generic table, it can't be specific, it needs to be able to be run on many different tables. The problem I'm having is if it's run on multiple tables on the same page. The click events fire just fine, but they only operate on the check elements in the final table, not the check elements within the table they were supposed to work on.

Here's the code:

            $parent = $table.parents('div.ibox').find('div.ibox-title');
            $select_all = $parent.find('button.select_all');
            $deselect_all = $parent.find('button.deselect_all');
            $input_delete = $table.find('input.delete');

            if ($table.find('input.delete').length >= 2) {
                $select_all.removeClass('hidden');
            } else {
                $select_all.addClass('hidden');
                $deselect_all.addClass('hidden');
            }

            $select_all.on('click', function(event) {
                $input_delete.each(function() {
                    $(this).prop('checked', true).trigger('change');
                    $select_all.addClass('hidden');
                    $deselect_all.removeClass('hidden');
                });
            });

            $deselect_all.on('click', function(e) {
                $table.find('input.delete:checked').each(function() {
                    $(this).prop('checked', false).trigger('change');
                    $deselect_all.addClass('hidden');
                    $select_all.removeClass('hidden');
                });
            });

$table is a variable containing the $('table') element the function is being run on, it's passed into the function.

Just wondering if anyone has any ideas on how to get the click elements to fire on the checkboxes within the table they are supposed to, and not the final table on the page.

Answer 1

Assuming you haven't omitted any code from your function other than the actual function someFunc() { and closing } part, these lines:

        $parent = $table.parents('div.ibox').find('div.ibox-title');
        $select_all = $parent.find('button.select_all');
        $deselect_all = $parent.find('button.deselect_all');
        $input_delete = $table.find('input.delete');

...all declare (or update) global variables. So after the function has been run for several different tables, those variables will continue to reference the last table's elements.

Those variables should all be declared with var, making them local to your function. Then your click event handlers will be referring to their own variables and not sharing global variables. (The click handlers can continue to refer to local variables in their containing scope even after the containing function completes, because closures.)