1

I have the following code:

$('.helloWorld').on('click', function() {
    $(this).css('background', 'black'); 
});

Instead, I would like to do something like this (for research):

var params = [
    'click',
    function () {
        $(this).css('background', 'black');
    }
];

$('.helloWorld').on(params);

I get an error that reads, "Uncaught SyntaxError: Unexpected token , ."

Is this possible? If so, how?

user1477388
  • 20,790
  • 32
  • 144
  • 264
  • possible duplicate of [Calling dynamic function with dynamic parameters in Javascript](http://stackoverflow.com/questions/676721/calling-dynamic-function-with-dynamic-parameters-in-javascript) – Dave Sep 18 '14 at 16:46
  • I think you need to use something like `$.fn.on.apply($(".selector"), params);`, but I may be off – Ian Sep 18 '14 at 16:47
  • 1
    The question is, why do you use an array? As long as the array looks like that, with only one event, you can use `apply`, but it seems much easier to use an object, that way you could add as many events and callbacks as you want ? – adeneo Sep 18 '14 at 16:57
  • @adeneo Maybe that's the "for research" part? Either way, you're right, they should understand the "better" way – Ian Sep 18 '14 at 16:58
  • 2
    I really don't like the posted answers, and think it should be done like this -> **http://jsfiddle.net/37xp6srj/** – adeneo Sep 18 '14 at 16:59
  • 1
    @adeneo Agreed, I think that's the *best* way. But again, I think the OP was wondering how to do it with an array. I'd post that as an answer though – Ian Sep 18 '14 at 17:02
  • @adeneo I actually like yours better, too! Thanks. Only problem with it is if I want to pass additional vars such as `on('click', 'tr', function(){})`. Any idea for such a scenario? – user1477388 Sep 18 '14 at 17:37
  • Sure, you'd pass that in after the map, like this `$('.helloWorld').on(params, 'tr');` – adeneo Sep 18 '14 at 17:40
  • @adeneo Thanks; looks like Paulpro's solution may be better here `$.fn.on.apply( $('.helloWorld'), params );` since I can just pass an array of params. However, that is not a common scenario so I still like your solution more. Post as answer and i'll accept, please – user1477388 Sep 18 '14 at 17:48

2 Answers2

4

You can use apply to call a function using an array as the arguments, you need to specify the thisArg though:

$.fn.on.apply( $('.helloWorld'), params );
Paul
  • 139,544
  • 27
  • 275
  • 264
3

You are using an array in your example. Use an object instead ({} instead of []) Something like this should work:

var params = {
    "event" : 'click',
    "callback" : function () {
        $(this).css('background', 'black');
    }
};

$('.helloWorld').on(params.event, params.callback);
sma
  • 9,449
  • 8
  • 51
  • 80
  • 1
    They are purposefully using an array. The question isn't about how to do it differently. It's very possible with an array, as Paulpro has shown. I'm not saying this is a bad alternative, but it doesn't really answer the question. And if they are going to use an object literal, it would make more sense to use `var params = { on: function () { .... } }; $("").on(params);` – Ian Sep 18 '14 at 16:50
  • 1
    Understood but are they purposefully using an array? OP never said that. – sma Sep 18 '14 at 16:51
  • Hmmm, reading it again, you're right. It wasn't as direct/specific as I remembered. Especially because they said "for research". I guess what I'm more referring to is the fact that they seem to want to pass **one** parameter (it's the title, technically) to the `.on()` call - that seems purposeful. Your answer still uses two parameters, it just happens to store them in a single place, instead of two vars. – Ian Sep 18 '14 at 16:56