jQuery - Calling a function inline

Question

I am trying to pass one variable to a jQuery function inline (ie: using an onMouseOver="function();" within the actual link (which is an area tag from an image map)).

The function is only being called if I place it before the $(document).ready(function(){ line, but doing this is causing all sorts of problems with jQuery.

All I want is for a simple tag (such as <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> to launch a function that is contained within the normal jQuery body of code.

Many thanks for any help you can offer.

To illustrate the point, the following works:

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

But the following doesn't

<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 your second example, you've declared myfunction inside the anonymous function you're passing to .ready(). That means myfunction is a local variable, which is only in scope inside that anonymous function, and you cannot call it from anywhere else.

There are two solutions.

First, you can declare it outside (before or after) the call to .ready(). This should not cause any interference with jQuery. If it does, something else is wrong (perhaps a simple syntax error?) that we'd welcome you to bring up in a StackOverflow question.

Second, you shouldn't be using onMouseOver="" to attach event handlers (as that mixes JavaScript with HTML), so let's do away with it entirely. Replace your JavaScript with this:

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

And your HTML with this:

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

(Presumably you'll want to replace that id with something more meaningful in context, of course.)

Answer 2

There are two resons why the code doesn't work. First of all you are missing a closing parenthesis in the call to the ready function, so you get a syntax error.

Second, the function that you define inside the function only exist in that scope. When you exit the function it doesn't exist any more.

Example:

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

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

You can define the function globally from within the function like this:

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