Calling Javascript Functions by name

Question

If I have an element on the page like this ...

<span data-function="DoSomething">Click</span>

... and i put this in my page header ...

$(document).ready(function() 
{ 
   $('[data-function]').each(function()
   {
       var fName = $(this).attr('data-function');
       $(this).click(fName);
   });
});

... what goes in place of the comment produce the desired effect of executing the function called "DoSomething".

Note: I no the code above wont work, my question is how to make this work (translate 'DoSomething' in to DoSomething();)

Any ideas guys?

http://stackoverflow.com/questions/3619046/use-javascript-variable-as-function-name — phantasm, Aug 21 '12 at 11:33

KooiInc · Accepted Answer · 2012-08-21T12:31:50.890

3

The functions should be available. Try putting them in an Object, like this:

$(document).ready(function() 
{ 
   var fns = {
      DoSomething: function() {/* ... */},
      DoAnotherthing: function() {/* ... */}
   };
   $('[data-function]').each(function()
   {
       var fName = $(this).attr('data-function');
       $(this).click(fns[fName]);
   });
});

Here's a jsfiddle, demonstrating a way to keep everything local to one namespace and assigning handlers based on the data attribute of elements.

edited Aug 21 '12 at 12:31

answered Aug 21 '12 at 11:31

KooiInc

119,216
31
141
177

I love this, it pushes the JS in to a more object oriented model instead of the typical "quick and dirty solution" i'm finding myself implementing a lot (dispirate functions with no relationships unlike something like C# on the server which forces you to group your functions in to classes giving your code structure) – War Aug 21 '12 at 11:36
@Wardy, yep, that's the idea. – KooiInc Aug 22 '12 at 06:45

score 2 · Answer 2 · answered Aug 21 '12 at 11:36

Try calling function with window object -

$(document).ready(function()  {
        $('[data-function]').each(function() {
            var fName = $(this).attr('data-function');

            if (typeof (window[fName]) === "function") {
                $(this).click(window[fName]); 
            }
        });  
}

score 1 · Answer 3 · answered Aug 21 '12 at 11:31

1

You can use something like

$(this).click(window[fName]);

Where window would be replaced by the appropriate expression if the function DoSomething is not defined in the global scope.

answered Aug 21 '12 at 11:31

Jon

428,835
81
738
806

probably a stupid question but ... what is the "appropriate expression" / how is it determined? – War Aug 21 '12 at 11:35
@Wardy: "It depends" (on your code). If you define it as a global function it's `window`. Or it could be something like Kooilnc's example. – Jon Aug 21 '12 at 11:38

score 0 · Answer 4 · answered Aug 21 '12 at 13:04

Maybe a little bit clean way:

http://jsfiddle.net/whsPG/

var myfuncs = {
  alert : function() {
        alert("An Alert");
    },
    changeName: function(obj) {
        $(obj).text('Other Text');
    }    
};

$('[data-function]').on('click', function()
{
  value =  $(this).data('function');

   if (myfuncs.hasOwnProperty(value)) {
     myfuncs[value](this);
   }

});

Calling Javascript Functions by name

4 Answers4