Send a variable to javascript function from jquery

Question

I have a jquery mouseover event which succesfully calls a javascript function

$(document).ready(function() {
$('.nw').mouseover(run_nw);
});

function run_nw() {
...
}

However, when I try to pass parameters, the js fails.

$(document).ready(function() {
$('.nw').mouseover(run_nw(1));
});

var a;
function run_nw(a) {
...
}

Tried looking through SO and through jQ documentation but I'm still stumped. I'm assuming this is a simple formatting issue.

Thanks

(Here is the full code if it helps)

    <script>
    var $ = jQuery.noConflict();
    var incr = 650;

        function run_nw() {
            //move x and y
            var topAdjust = -incr;
            var leftAdjust = -incr;

            var top = parseInt($(this).css('top'))+topAdjust;
            var left = parseInt($(this).parent().css('left'))+leftAdjust;

            //rotate
            var randomnumber = Math.floor(Math.random()*11);
            var rotate = -randomnumber*10;

            $(this).animate({
                top:top,
                left:left,
                'rotate':rotate
            }, 700, 'swing');
        }

        $(document).ready(function() {
            $('.nw').mouseover(run_nw);
        });
    </script>

One small bug: when using parseInt you should pass the number 10 as a second parameter. If you don't, then funky things can happen. If you're number starts with a zero, for example, I think JS interprets it as hex and uses base 16. — buley
– buley, Commented Nov 20, 2011 at 19:24

James Allardice · Accepted Answer · 2011-11-20 19:17:13Z

4

Wrap the function call in an anonymous function:

$('.nw').mouseover(function() {
    run_nw(1);
});

The way you have it currently will execute the function and pass the result of that as the callback to mouseover.

Update

The problem with your current code is that in the event handler function, this does not refer to what you're expecting (it refers to the Window, because you are calling the function from an anonymous callback to mouseover - this inside the anonymous callback is what you want it to be).

So, you need to pass this into the function and change any references to this to whatever you choose to name that argument:

$('.nw').mouseover(function() {
    run_nw(1, this);
});
function run_nw(a, elem) {
    //Now `elem` is what you expected `this` to be
}

Here's an updated fiddle.

edited Nov 20, 2011 at 19:17

answered Nov 20, 2011 at 18:39

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Adam Grant Over a year ago

Thanks James. I tried that and it didn't work, I'm afraid. I even tried this format with just "run_nw()" with no variables in the parameter of the js. It's weird. I thought your solution would have worked.

James Allardice Over a year ago

Can you post an example on jsfiddle.net? That will make it easier to see where the problem is.

Alper Over a year ago

In your code Firebug warns me like in JSFiddle; elem.ownerDocument is undefined source file: code.jquery.com/jquery-1.7.js Line: 6766 and in my local server: elem.ownerDocument is undefined Source file: localhost/.../jquery-latest.js Line: 6566, your problem is not about mouseover...

Adam Grant Over a year ago

I think it has something to do with the "This" being broken.

Adam Grant Over a year ago

@alper, yeah, that's because it refers to a relative path. That's why I took the code down. The jquery works fine because I tested it without the parameter in the function and it worked. Thanks though.

|

Collectives™ on Stack Overflow

Send a variable to javascript function from jquery

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related