Jquery: вызов функции по имени при выборе изменения

Я пытаюсь вызвать функцию по имени .onchange для выбора, но ничего не происходит. Когда функция описывается после атрибута, она работает.

ЭТО НЕ РАБОТАЕТ

HTML:

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

SCRIPT:

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

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

ЭТО РАБОТЫ

HTML:

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

SCRIPT:

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

EDIT:

Хорошо, для всех тех, кто сказал мне включить функцию в тот же script. Это невозможно, потому что функция testMessage() находится во внешнем .js script, включенном в <head> HTML.

Ответ 1

Это потому, что обработчик testMessage не определяется при привязке его к событию изменения.

Он должен работать, если он был в том же контексте script, как показано ниже,

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

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

Код внутри <script></script> выполняется один за другим с прогрессивной вершиной, а функция testMessage не существует внутри первого <script></script>.

У вас есть пара вариантов,

Поместите его в анонимную функцию, которая позволит вашему script разрешить функцию testMessage позже. [Как предложено в Optimus Prime)
```
<script type="text/javascript">
  $('#numb').change(function () { 
     testMessage
  });
</script>
<script type="text/javascript">
   function testMessage(){
      alert('Hello');
   }
</script>
```
Включите script, у которого есть функция testMessage выше script, которая связывает testMessage, как показано ниже,
```
<script type="text/javascript">
function testMessage(){
    alert('Hello');
}
</script>
<script type="text/javascript">
  $('#numb').change(testMessage);
</script>
```

Ответ 2

Вместо этого попробуйте

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

Ответ 3

Рабочая Jsfiddle попробуйте следующее:

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

Ответ 4

Попробуйте это и поместите в тег script:

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

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

Ответ 5

Вы должны определить обратный вызов функции изменения.

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

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

Это должно решить вашу проблему.

Ответ 6

Я не думаю, что ваша ссылка существует еще в функции здесь, это два способа, которыми вы могли бы это сделать. Я поместил версию с именами в качестве предложения, потому что это могло бы помочь очистить ваш код в целом.

HTML:

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

SCRIPT:

//Именованные пространства и использование прокси

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

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

//Только что объявленный

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

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

Если ваш метод находится в другом файле, убедитесь, что вы включили этот файл перед тем, который связан с привязкой события. Вы получаете какие-либо ошибки консоли?