Passing a function directly to a change() event does not work

Question

I have to show or hide some divs according the value selected of a select. To do this, I have this block of code that works great:

$(document).ready(function($) {
      function formaCaptacao()
      {
            $('.receptivo').parent().hide();
            $('.indicacao').parent().hide();
            $('.interna').parent().hide();
            var a = $('#cp-forma-captacao').val();
            console.log(a);

            switch( $('#cp-forma-captacao').val() ) {
                  case 'contato_receptivo':
                        $('.receptivo').parent().show();
                        break;
                  case 'indicacao':
                        $('.indicacao').parent().show();
                        break;
                  default:
                        $('.interna').parent().show();
                        break;
            }
      }

      formaCaptacao();

      $('#cp-forma-captacao').change(function(){
            formaCaptacao();
      });
});

On the bottom, when user changes the select value, I have to pass a function as parameter to the event change(). I tried this:

$('#cp-forma-captacao').change( formaCaptacao() );

But it does not work. It's like the change() event is never been called. Why? I'm just passing a function as parameter. Theoretically, it should work.

Try removing the parentheses from the function name when calling it inside the `.change()` like this: `$('#cp-forma-captacao').change( formaCaptacao );` — Moose, Jun 20 '17 at 17:07
$('#cp-forma-captacao').change( formaCaptacao ); Using parentheses you execute the function and so apply to the change handler the result. In your case it's undefined. — gaetanoM, Jun 20 '17 at 17:09

Tom Davies · Accepted Answer · 2017-06-20T17:16:24.557

In your example, you're invoking the function instead of passing the reference to the function itself - so what you're actually passing into change() is the result of calling formaCaptacao (which will be undefined, since it never returns anything), not the function itself.

Try this instead...

$('#cp-forma-captacao').change(formaCaptacao);

If you think of it as though you're doing this...

var formCaptaco = function() { console.log('example!'); }
$('#selector').change(formCaptacao);

...it might make more sense (it's actually slightly more complicated than that in reality, see this answer for a description of the differences).

I see. Now I really undestand how this works. I don't know who downvoted. It was not me. I upvoted. — Keoma Borges, Jun 20 '17 at 17:19

Passing a function directly to a change() event does not work

1 Answers1