web-dev-qa-db-ja.com

jquery：選択変更時に名前で関数を呼び出す

Selectの_.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>
_

編集：

OK、同じスクリプトに関数を含めるように言ったすべての人のために。 testMessage()関数は、HTMLの_.js_に含まれる外部_<head>_スクリプトにあるため、これは不可能です。

javascriptjqueryfunction
11
Perocat

ハンドラーtestMessageは、変更イベントにバインドするときに定義されないためです。

以下のような同じスクリプトコンテキストにある場合は動作するはずです。

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

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

<script></script>内のコードは上から順にプログレッシブに実行され、testMessage関数は最初の<script></script>内に存在しません。

ここにはいくつかのオプションがありますが、

  1. testMessage関数を後で解決するスクリプトを作成できるようにする匿名関数内に配置します。 [ Optimus Prime answerで提案されているとおり]

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

  2. 以下のようにtestMessageをバインドするtestMessageの上にscript関数を持つスクリプトを含めます。

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

代わりに、

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

Working Jsfiddle これを試してください：

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

これを試して、同じスクリプトタグに配置します。

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

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

ここでの関数への参照がまだ存在するとは思わない。一般的にコードをクリーンアップするのに役立つ可能性があるため、名前空間バージョンを提案として配置しました。

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>

メソッドが別のファイルにある場合は、イベントバインディングを持つメソッドの前にそのファイルを含めるようにしてください。コンソールエラーが発生していますか？

0
BillPull

変更関数でコールバックを定義する必要があります。

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

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

これで問題が解決するはずです。

0
Matthew R.