これは単純なものでなければなりません。インターネットを検索したところ、この問題の原因として構文エラーのみが見つかりましたが、構文エラーは見つかりません。
JavaScriptは次のとおりです。
<script type="text/javascript" src="http://localhost/acrilart/javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function hi(){
alert('hi');
}
hi();
});
</script>
そして、HTML:
<input type="text" name="cep" value="" id="cep" class="required cep field"
onChange="hi()" />
ページロードでは、関数hi
が期待どおりに呼び出されますが、私のonChange
イベントにより、関数が定義されていないというFirebugエラーが発生します。私は本当に困惑しています。 「こんにちは」のつづりを間違えましたか?
hi
関数は、ready
イベントハンドラー内のスコープ内にのみあります。イベントハンドラーの外部に移動するか、内部でバインディングを処理します(そしてインラインイベントハンドラー属性をマークアップから削除します)。
$(document).ready(function(){
function hi(){
alert('hi');
}
$("#cep").on("change", hi);
});
hi
関数は、ready
ブロックでのみ定義されます。外にはもう存在しません。
関数定義を.ready()
でラップする必要はないので、削除するだけです。または、次のように関数を定義します。
window.hi = function() {...}
コードブロックで:
_<script type="text/javascript">
$(document).ready(function(){
function hi(){
alert('hi');
}
hi();
});
</script>
_
hi
はグローバル関数ではありません。 function(){...}
のスコープ内でのみアクセスでき、外部からはアクセスできません。
JQueryを使用しているため、関数をonChange
イベントにバインドする方法を変更できます。 htmlタグから呼び出すのではなく、次のように記述できます。
_<script type="text/javascript">
$(document).ready(function(){
function hi(){
alert('hi');
}
hi();
$('#cep').on( 'change', function(){ hi(); } );
});
</script>
_
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function hi(){
alert('hi');
}
</script>
<input type="text" name="cep" value="" id="cep" class="required cep field" onKeyPress="javascript:hi();" />
onchange
は、コントロールがぼやけている場合にのみトリガーされます。代わりにonkeypress
を試してください。
$("#cep").on("change", function() {
alert(1);
});
または
<input type="text" name="cep" value="" id="cep" class="required cep field"
onkeypress="hi()" />
onchange
の代わりに次のイベントを使用します。
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)