Question

Supposing I have the line of code:

$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel);

Pointing to the function:

function toggleComparisonPanel() {
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');    
  $filters.toggle();
}

This works in Chrome as apparently it attaches event to window making it global as I understand it. However Firefox requires the event to be passed to the function. I’ve tried this with no success:

$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel(event);

function toggleComparisonPanel(event) {
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');    
  $filters.toggle();
}

Is something like this even possible, or is my only option to put the code into an anonymous function within the .on() function, something like the following code?

$comparePanel.on('click', '.pills li:not(.active)', function(event){
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');    
  $filters.toggle();
});

I’d prefer to keep my event handler and the function separate if at all possible. Probably not much reason other than it feels tidier to me to be honest, but it’d be nice to do it

Answer 1

You can simply declare the function somewhere else, like this:

// declare event here, since you're using it here    
function toggleComparisonPanel(event) {
    event.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    $quickSpecsTable.toggleClass('comparison-mode');    
    $filters.toggle();
}


//                                                  just pass the function here
$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel);