JQuery: Calling a Function Dynamically

Question

I have attached a onClick event handle to a tag. On click, I wanted to pick-up an attribute -- let's say, fn; and I want to call the function mentioned as the attribute value.

The following code does not work

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script language="JavaScript">
        var Test = Test? Test : new Object();
        $(document).ready(function(){
            Test.main();
        })
        Test.sub = function(){
            alert('called');
        }
        Test.main = function(){
            $('.caller').click(function(e){
                e.preventDefault();
                var fn = $(this).attr('fn');
                alert('calling: '+fn);
                return fn();
            });
        }
    </script>
</head>
<body>
    <a class="caller" fn="Test.sub" href="#">test call</a>
</body>
</html>

My questions are

Is it possible?
What am I doing wrong?
What could be right approach to solve this issue?

Thanks
Nishant

T.J. Crowder · Accepted Answer · 2010-12-22 07:58:49Z

14

Is it possible?

Yes. If you change your link to just have sub:

<a class="caller" fn="sub" href="#">test call</a>

Then this works:

$('.caller').click(function(e){
    e.preventDefault();
    var fn = $(this).attr('fn');
    alert('calling: '+fn);
    return Test[fn]();
});

The value you retrieve is a string. You can index into an object's properties using a string if you like using bracketed notation ([]), so all of these are equivalent:

Test.sub();
Test['sub']();
var fn = 'sub';
Test[fn]();

What am I doing wrong?

You were nearly there. You had "Test.sub" in a string, but as it was a string, not a function, you couldn't call it. It would be like doing this:

"Test.sub"();

....which obviously isn't quite doing what you want. :-)

What could be right approach to solve this issue?

In technical terms, the above solves the problem. Part of me worries about having the actual function name in an attribute and wants to say "have a lookup table instead", but your Test object basically is the lookup table, so...

Side note: In this situation, you may see people using eval. Usually that's because they didn't realize you could index into an object with bracketed notation. eval is best avoided.

Off-topic #1: Your attribute, fn, is invalid (invalid = won't validate). In HTML4 and earlier, all custom attributes were invalid, although every desktop browser I've ever seen allows them (browsers let us get away with lots of things). As of HTML5, the demand for this feature was heard and we can have valid custom attributes, but they must start with data- so the validator knows they're custom. So if validation is part of your workflow (and it's usually a good idea), you might go with data-fn="sub" rather than simply fn="sub". More here.

Off-topic #2: If you want to save some typing, use {} rather than new Object(). E.g.:

var Test = Test? Test : {};

And if you want to save even more, use the curiously-powerful || operator:

var Test = Test || {};

edited Dec 22, 2010 at 7:58

answered Dec 22, 2010 at 7:23

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

8 Comments

user166390 Over a year ago

Note on "Off-topic" section: While HTML4 doesn't allow custom attributes, I believe that every (ooh!) major [desktop] browser (historic and current) has silently accepted them into the accessible DOM, at least since the time of allowing JS access to the DOM.

T.J. Crowder Over a year ago

@pst: Indeed they have. I usually mention that, but seem to have left it out above.

Michael Sagalovich Over a year ago

I would still use either eval or some more sophisticated logic before calling the method to untie myself from relying on that attribute really names the property of Test class. In real life it may appear to name, for example, a user-defined window function with or without window. before its name, and your approach will not work then. With eval, you just don't care which object's function you are calling. So eval(fn + "()"); is my choice. Just wrap it in try ... catch, maybe.

T.J. Crowder Over a year ago

@Michael: eval compiles and executes arbitrary code, which can do anything. I just would not do it. The issues you list above are easily handled by parsing the attribute into its component pieces (for instance, "Test.sub" could be split into ['Test', 'sub'] and handled intentionally), without relying on the jackhammer of eval. And in fact, the majority of those issues aren't issues at all, but features -- containing the scope of what can be done with the code/command/whatever in the attribute.

Yasitha Over a year ago

@T.J.Crowder - Your code helped me a lot. Thank You for nice explanation.

|

Thiago Cordeiro · Accepted Answer · 2012-01-28 13:29:15Z

-1

try this:

<a class="caller" fn="Test.sub()" href="#">test call</a>

and:

$('.caller').click(function(e){
    e.preventDefault();
    var fn = eval($(this).attr('fn'));
    fn;
});

answered Jan 28, 2012 at 13:29

Thiago Cordeiro

1

Collectives™ on Stack Overflow

JQuery: Calling a Function Dynamically

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related