Javascript Pass parameter to function inside variable

Question

I'm trying to assign a click handler to a JQuery object, defined in a variable :

some.object.array[8].action = function(data){console.log(data);}
anotherobject = {..}

now inside some loop, I need to assign this function to the click handler: and want to pass the whole 'anotherobject' object

for (var i = 0; i < foo.length; i++) {
    $('<div/>').click(some.object.array[i].action);
}

But how can I pass the parameter? If I encapsulate it inside some anonymous function, I'm losing my scope...:

for (var i = 0; i < foo.length; i++) {
    $('<div/>').click(function() {
        some.object.array[i].action(anotherobject)
    });
}

because i has changed...

How are we supposed to do this?

Sebastian Nette · Accepted Answer · 2015-06-26 14:12:08Z

3

There are just too many ways to do this:

for (var i = 0; i < foo.length; i++) {
    (function(i) {
        $('<div/>').click(function() {
            some.object.array[i].action(anotherobject);
        });
    })(i);
}

Or

for (var i = 0; i < foo.length; i++) {
    $('<div/>').data("i", i).click(function() {
            var i = $(this).data("i");
            some.object.array[i].action(anotherobject);
        });
    });
}

Or

function getClickHandler(callback, parameter) {
    return function() { callback(parameter); };
};
for (var i = 0; i < foo.length; i++) {
    $('<div/>').click(getClickHandler(some.object.array[i].action, anotherobject));
}

answered Jun 26, 2015 at 14:12

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

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

1 Comment

Vincent Duprez Over a year ago

implementation was a bit complicated, but after all, it works! Thanks, Any idea how you call this way of doing (method1)

Ian · Accepted Answer · 2015-06-26 14:25:29Z

0

If you want your action function to maintain the div as this and still accept the jQuery event object, you can use bind like this example:

function action(another, event){
    console.log(this, arguments);
}

$(function(){
    for (var i = 0; i<10; i++) {
        var anotherObject = "another"+i;
        var div = $('<div>'+i+'</div>');
        // force 'this' to be 'div.get(0)'
        // and 'arg0' to be 'anotherObject'
        div.click(action.bind(div.get(0),anotherObject));
        $("body").append(div);
    }
})

Example: https://jsfiddle.net/Lwe5b9cx/ You'll need to open the console to see the output, which should look like this:

answered Jun 26, 2015 at 14:25

Ian

1594 bronze badges

Comments

Francesco Terenzani · Accepted Answer · 2015-11-16 22:18:36Z

0

for(var i = 0; i < foo.length; i++)
{
  $('<div/>').click(
    (
      return function(callback){
        callback(anotherobject)
      }
    )(some.object.array[i].action)
  );
}

edited Nov 16, 2015 at 22:18

answered Jun 26, 2015 at 14:02

Francesco Terenzani

1,3917 silver badges14 bronze badges

3 Comments

Vincent Duprez Over a year ago

callback is also out of scope once the anonymous function is executed

arb Over a year ago

This will not work. When this loop ends, i will be outside the bounds of the array and some.object.array[i] will return undefined. Plus since you are attaching handlers inside a for loop, they will ALL use this undefined value.

Francesco Terenzani Over a year ago

Thanks, now it should be fixed

Collectives™ on Stack Overflow

Javascript Pass parameter to function inside variable

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related