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

【问题标题】：jquery: Call function by name on select changejquery：在选择更改时按名称调用函数
【发布时间】：2013-08-14 18:23:23
【问题描述】：

我正在尝试按名称 .onchange 调用一个函数，但没有任何反应。当函数在属性后被描述时，它就起作用了。

这行不通

HTML：

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

脚本：

<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 type="text/javascript">
    $('#numb').change(function(){
      alert('Hello')
    });
</script>

编辑：

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

【问题讨论】：

你的控制台说什么？ testMessage isn't defined 之类的东西？
你真的应该在 document.ready 函数中做你的事件绑定
对我来说很好：jsfiddle.net/FMynS
@JonnySooter 问题是多个<script> 元素。吊装对他们不起作用：jsfiddle.net/WL87H
来自编辑：function is in an external .js script included on the <head> of the HTML.

标签： javascript jquery function

【解决方案1】：

这是因为handlertestMessage在绑定change事件时没有定义。

如果它在如下相同的脚本上下文中应该可以工作，

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

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

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

你有几个选择，

将它放在一个匿名函数中，让您的脚本稍后解析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>

【讨论】：

@Perocat 将其包裹在匿名函数中。绑定onchange事件时需要解析handler函数testMessage，而不是handler函数的内容。

【解决方案2】：

不如试试，

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

【讨论】：

@Perocat 绑定时需要解析处理函数，而不是处理函数的内容。
@Perocat 匿名函数延迟testMessage 的解引用。到那时，它就会被定义。
这是一个好的/正确的解决方案，或者延迟可能会很短？
@Perocat 如果更简单，您可以更改脚本执行顺序。将具有处理函数的脚本移到绑定函数的脚本上方。
@Perocat 然后，您可以在此处的 jquery 之前使用此函数加载 js，也可以在我的答案中使用方法。

【解决方案3】：

Working Jsfiddle 试试这个：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案7】：

无论何时更改值，您都可以获得该值。

<select id="numb" onchange="Selecteditems()">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

 var Selecteditems = function () {
            var items= $('#numb').val();
alert(items)
          
        }

【讨论】：