jquery: Call function by name on select change

Question

I\'m trying to call a function by name .onchange of a select but nothing happens. When the function is describled after the attribute, it works.

THI

Answer 1

It is because the handler testMessage is not defined when binding it to the change event.

It should work if it was in the same script context like below,

<script type="text/javascript">
    $('#numb').change(testMessage);

    function testMessage(){
        alert('Hello');
    }
</script>

Code inside <script></script> are executed one by one progressive from top and testMessage function doesn't exist inside the first <script></script>.

You have couple of options here,

1. Put it inside an anonymous function which will let your script to resolve the testMessage function later. [As suggested in Optimus Prime answer]

   <script type="text/javascript">
     $('#numb').change(function () { 
        testMessage
     });
   </script>
   <script type="text/javascript">
      function testMessage(){
         alert('Hello');
      }
   </script>
   

2. Include the script that has testMessage function above the script that binds the testMessage like below,

   <script type="text/javascript">
   function testMessage(){
       alert('Hello');
   }
   </script>
   <script type="text/javascript">
     $('#numb').change(testMessage);
   </script>
   

Answer 2

Working Jsfiddle try this:

<script type="text/javascript">
    $('#numb').on('change',testMessage);
</script>

Answer 3

I dont think your reference exists yet to the function here is two ways you could do it. I put the namespaced version as a suggestion because it might help clean up your code in general.

HTML:

<select id="numb">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

SCRIPT:

// Namespaced and using Proxy

<script type="text/javascript">
    var project = project || {};
    project = {
        testMessage: function (event) {
           alert('Hello');
        }
    };

    $('#numb').change($.proxy(project.testMessage, project));
</script>

// Just declared

<script type="text/javascript">
    function testMessage(){
      alert('Hello');
    }

    $('#numb').change(function(event) {
       testMessage();
    });
</script>

If your method is in another file make sure you include that file before the one with the event binding. Are you getting any console errors?

Answer 4

Instead try ,

<script type="text/javascript">
    $('#numb').change(function(){
       testMessage();
    });
</script>

Answer 5

Try this and place in the same script tag:

<script type="text/javascript">
    $(document).ready(function(){
        $('#numb').change(testMessage);

        function testMessage(){
            alert('Hello');
        }
    });
</script>

Answer 6

You must define a callback on the change function.

<script type="text/javascript">
    $('#numb').change(function(){
        testMessage(); 
    );

    function testMessage(){
        alert('Hello');
    }
</script>

That should fix your problem.