define functions in a for loop

Question

I have prepared a JsFiddle to explain my problem, here is it: http://jsfiddle.net/3tAZ7/1/

So, basically i'm trying to attach an handler to every mathjax rendered object so that when i click one of those, the function "jax_remove" is called.

The problem is that no matter what mathjax element I click, it removes the last mathjax element!

This is the function i'm using:

setTimeout(function() { //timeout is necessary for mathjax loading
    jaxes = MathJax.Hub.getAllJax("math");
    for(var i = 0; i < jaxes.length; i++) {
        var jax=jaxes[i];
        alert(jax.inputID);
        $("#"+jax.inputID+"-Frame").click(function() {                     
            jax_remove(jax);
        });
    };
},1250);

if you inspect the DOM, you can see that every rendered mathjax is included in a span with an id like "MathJax-Element-n-Frame", where n=1,2,3,... so those are the element I attached the handler to, and it seems to work, the proof are the two initial alerts that comes out.

So the problem seems to be in the link to the "jax_remove" function.

Can you please help me?

Answer 1

To reduce complexity, consider using Function.prototype.bind().

$("#"+jax.inputID+"-Frame").click(jax_remove.bind(null, jax));

Fiddle

Answer 2

change:

  $("#"+jax.inputID+"-Frame").click(function() {                     
        jax_remove(jax);
  });

to:

  $("#"+jax.inputID+"-Frame").click( (function(j) {                     
        return function(){ 
           jax_remove(j);
        };
  })(jax) );

For explanation look at @Arun P Johny's links.