Jquery - Pass data to inline functions

Question

This is probably really simple, and the answer is probably really obvious, but I'm drawing a blank here.

I have an array of HTML elements that I am binding the .hover() event to. I need to know what array index was used by the event.

So let's say element[7] is hovered over, how do I pass the number 7 to that function?

Here is what I am using:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover(function() {
        // Mouse enters HTML element

        alert(i); 

        // "i" returns 15, which makes sense because "i" 
        // has changed since this function was defined.
    });
}

Oded · Accepted Answer · 2011-11-06 21:31:34Z

2

Use a closure as a wrapper to save state.

for (i = 0; i < statecount; i+=1)
{
  (function(i){
    $('#'+imagemap[i][0]).hover(function () {
      alert(i);
    });
  }(i));
}

edited Nov 6, 2011 at 21:31

Oded

501k102 gold badges900 silver badges1k bronze badges

answered Nov 6, 2011 at 21:29

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

4 Comments

Radley Sustaire Over a year ago

This works, does this little trick have a name? I tried searching for jquery wrapper but it shows results for the wrap() function, etc. Thanks

JCOC611 Over a year ago

@RadGH: JavaScript self-calling function I believe...or self-invoking function

Domenic Over a year ago

"immediately invoked function expression": benalman.com/news/2010/11/…

Radley Sustaire Over a year ago

Thanks for the comments, it's difficult to find things like this by just using google. Hehe

JCOC611 · Accepted Answer · 2011-11-06 21:36:21Z

1

While this doesn't answer your question, you can get a handle to the object that was hovered over using this inside the function:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover(function() {
        alert(this);
    }
}

You might want to use $(this) if you want the JQuery object.

edited Nov 6, 2011 at 21:36

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

answered Nov 6, 2011 at 21:31

Christian Mann

8,1455 gold badges43 silver badges52 bronze badges

2 Comments

Christian Mann Over a year ago

That's not what he asked for specifically, no, but it might be what he wants.

Radley Sustaire Over a year ago

Thanks for the help, I knew about "this" already (heh). I considered looping through my array and comparing "this" to the element of the array, but couldn't get that to work - and if it did it would have been a very clunky way of doing it. Thanks though.

hyperslug · Accepted Answer · 2011-11-06 21:51:33Z

1

If you're using >= jQuery 1.6, $.proxy will curry parameters:

$.proxy(function(a, b, c) { ... }, this, 'argA', 'argB', 'argC');

so you could write it like this:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover($.proxy(function(index, event) {
        // Mouse enters HTML element

        alert(index); 
    }, this, i));
}

Note that this pushes the event the end of the argument list.

answered Nov 6, 2011 at 21:51

hyperslug

3,6431 gold badge31 silver badges29 bronze badges

Comments

Michael Lorton · Accepted Answer · 2011-11-06 21:40:15Z

0

Be careful because this is easy to screw up:

var hoverer = function(i) {
  return function() {
         alert(i); 
  };
};

for (i=0; i<statecount; i++) {
        $("#"+imagemap[i][0]).hover(hoverer(i));
}

answered Nov 6, 2011 at 21:40

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Collectives™ on Stack Overflow

Jquery - Pass data to inline functions

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related