jQuery - Aufruf einer Funktion inline

Question

Ich versuche, eine Variable an eine jQuery-Funktion inline übergeben (dh mit einer onMouseOver="function();" innerhalb der tatsächlichen Link (das ist ein Bereich-Tag aus einer Imagemap)).

Die Funktion wird nur aufgerufen, wenn ich es vor der $(document).ready(function(){ Linie, aber dies verursacht alle Arten von Problemen mit jQuery.

Alles, was ich will, ist für einen einfachen Tag (wie <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> eine Funktion zu starten, die innerhalb des normalen jQuery Körper Code enthalten ist.

Vielen Dank für jede Hilfe, die Sie anbieten können.

Zur Veranschaulichung der Punkt, die folgenden Werke:

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

Aber die folgenden nicht

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

Answer 1

In Ihrem zweiten Beispiel haben Sie myfunctionin die anonyme Funktion deklariert, die Sie an .ready() übergeben. Das bedeutet, myfunction ist eine lokale Variable, die nur innerhalb dieser anonymen Funktion enthalten ist, und Sie können sie nicht von irgendwo anders aufrufen.

Es gibt zwei Lösungen.

Zuerst können Sie es außerhalb (vor oder nach) den Anruf an .ready() erklären. Diese sollte keine verursachen Interferenzen mit jQuery. Wenn dies der Fall ist, stimmt etwas anderes nicht (vielleicht ein einfacher Syntaxfehler?), Den wir gerne in einer StackOverflow-Frage zur Sprache bringen würden.

Zweitens sollten Sie nicht onMouseOver="" verwenden, um Event-Handler (wie das Mischen von JavaScript mit HTML) anhängen, also lass es uns ganz weg. Ersetzen Sie JavaScript mit diesem:

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

Und Ihre HTML mit diesem:

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

(. Vermutlich werden Sie, dass id mit etwas Sinnvolles in Zusammenhang ersetzen wollen, natürlich)

Answer 2

Es gibt zwei Gründe, warum der Code nicht funktioniert. Zuerst fehlt Ihnen eine schließende Klammer im Aufruf der Ready-Funktion, so dass Sie einen Syntaxfehler bekommen.

Zweitens existiert die Funktion, die Sie innerhalb der Funktion definieren, nur in diesem Bereich. Wenn Sie die Funktion verlassen, existiert sie nicht mehr.

Beispiel:

$(document).ready(function(){ 
    function myfunction(x) { 
     alert(x); 
    } 
    myfunction(42); // here it works 
} 

myfunction(-1); // here it doesn't exist 

Sie können innerhalb der Funktion wie diese die Funktion global definieren:

$(document).ready(function(){ 
    myfunction = function(x) { 
    alert(x); 
    } 
});