jquery: Call function by name on select change

2020-07-04 12:59发布

站内问答 / JavaScript
870 6 4

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.

THIS DOESN'T WORK

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>

THIS WORKS

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:

Ok, for all those who said me to include the function on the same script. This is not possible because the testMessage() function is in an external .js script included on the <head> of the HTML.

6条回答
萌系小妹纸
2楼-- · 2020-07-04 13:32

Instead try ,

<script type="text/javascript">
    $('#numb').change(function(){
       testMessage();
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2020-07-04 13:33

Working Jsfiddle try this:

<script type="text/javascript">
    $('#numb').on('change',testMessage);
</script>
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
4楼-- · 2020-07-04 13:44

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?

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2020-07-04 13:48

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.

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
6楼-- · 2020-07-04 13:51

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>
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
7楼-- · 2020-07-04 13:54

Try this and place in the same script tag:

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

        function testMessage(){
            alert('Hello');
        }
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)