Question

我正在尝试按名称.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>

修改

好的，对于那些说我要在同一个脚本中包含该功能的人。这是不可能的，因为testMessage()函数位于HTML .js中包含的外部<head>脚本中。

Answer 1

这是因为在将其绑定到change事件时未定义处理程序testMessage。

如果它在下面的相同脚本上下文中，它应该有用，

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

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

<script></script>内的代码从顶部逐行执行，testMessage函数在第一个<script></script>内不存在。

这里有几个选项，

将它放在一个匿名函数中，让您的脚本稍后解析testMessage函数。 [根据Optimus Prime回答]

的建议

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

在testMessage之上包含script函数的脚本，该函数绑定testMessage，如下所示，

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

Answer 2

相反尝试，

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

Answer 3

Working Jsfiddle 试试这个：

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

Answer 4

试试这个并放在相同的脚本标签中：

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

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

Answer 5

您必须在更改功能上定义回调。

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

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

那应该解决你的问题。

Answer 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>

如果您的方法在另一个文件中，请确保在具有事件绑定的文件之前包含该文件。你收到任何控制台错误吗？

jquery：在选择更改时按名称调用函数

6 个答案: