[解決済み] jQuery - インラインで関数を呼び出す

質問

ある変数をjQueryの関数にインラインで渡そうとしています。 onMouseOver="function();" を実際のリンク (イメージマップのエリアタグ) 内に追加してください。）

の前に置いた場合のみ、関数が呼び出されます。 $(document).ready(function(){ という行がありますが、これをやるとjQueryでいろいろと問題が発生します。

私が欲しいのは、単純なタグ（例えば <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> を使用して、通常のjQuery本体のコードに含まれる関数を起動することができます。

説明のために、次のように動作させます。

<script type="text/javascript">
function myfunction(x)    {  alert(x); //Alerts 2  
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

しかし、以下はそうではありません。

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function myfunction(x)    {  alert(x); //Nothing happens   
}
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

解決方法は？

2つ目の例で、あなたは myfunction 内部 に渡している無名関数は .ready() . それはつまり myfunction はローカル変数で、その無名関数の中だけにスコープがあり、他の場所からは呼び出すことができません。

解決策は2つあります。

第一に、それを外（前または後）で宣言して .ready() . これは はいけません。 は、jQueryと干渉することがあります。 もし干渉するようであれば、何か他の問題(おそらく単純な構文エラー？)がありますので、StackOverflowの質問で取り上げていただければと思います。

次に onMouseOver="" をイベントハンドラのアタッチメントに使うのは、JavaScriptとHTMLを混同してしまうので、完全に排除しましょう。 JavaScriptをこれに置き換えてみてください。

$(document).ready(function() {
    $("#that-area-down-there").mouseover(function() {
        alert(2);
    });
});

そして、あなたのHTMLはこれで。

<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />

(おそらく、その id を、もちろん文脈上もっと意味のあるものに変えてください)。