Question

109

jQuery - Calling a function inline

rated 0 times [ 110] [ 1] / answers: 1 / hits: 57010 / 15 Years ago, sat, august 22, 2009, 12:00:00

I am trying to pass one variable to a jQuery function inline (i.e.: 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.

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 How to pass data fetched in _app.js to a component

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 15 Years ago kamryn · Accepted Answer

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