Storing a function with jQuery data() method

Question

The jQuery .data() documentation says the following:

The .data() method allows us to attach data of any type to DOM element

I assume "any type" refers to functions as well. Say I have a div with the id foo as such:

<div id="foo">Foo!</div>

And I'd like to store a function in it called say that takes a parameter. According to the documentation I'd store the function this way:

$("#foo").data("say", function(message){
   alert("Foo says "+message);
});

My question is, how do I invoke the function with a parameter when I wish to do so.

$("#foo").data("say"); should return the function, but how would I pass a parameter to it?

Kobi · Accepted Answer · 2013-12-12 06:07:49Z

43

A better alternative to storing functions in data is using custom events. This can be done easily with on and trigger:

$('#foo').on('say', function(e, arg){
    alert('Foo says ' + arg);
});

$('#foo').trigger('say', 'hello');

Example: http://jsfiddle.net/tW66j/

Note: on earlier versions of jQuery (until 1.7), .bind was used instead of .on.

edited Dec 12, 2013 at 6:07

answered Feb 1, 2010 at 8:11

Kobi

139k41 gold badges259 silver badges302 bronze badges

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

5 Comments

Yuval Karmi Over a year ago

+1 - this is great advice, but Darin answered my question exactly. Thank you very much.

bjornl Over a year ago

sometimes it's useful. consider a case where you want an uniform way to fetch data that is semantically associated with the DOM node, but the implementation of the data-fetching varies depending on node type.

bjornl Over a year ago

We could, of course, store an XPath or the target DOM node object itself to fetch but a callback function is more extensible and requires no duplication of DOM node objects

Dom Vinyard Over a year ago

For anybody coming back to this several years later, 'bind' has been depreciated in favour of 'on'. $('#foo').on('say', function(e, arg){alert('Foo says ' + arg);});

Kobi Over a year ago

@ATfPT - Good point, I updated the answer and the example. Thanks! By the way, the documentation doesn't say bind is deprecated (yet?). This is what deprecation looks like: die

Darin Dimitrov · Accepted Answer · 2010-02-01 07:30:58Z

28

var myFunction = $("#foo").data("say");
myFunction(someParameter);

answered Feb 1, 2010 at 7:30

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

Boss Ninja · Accepted Answer · 2012-11-12 16:08:22Z

4

Here's a more elegant way to call the method.

// store the method with data
$('#foo').data('bar',function(){console.log("Givin it the business!")});

// Simple execution (this will not keep the method in scope)
$('#foo').data('bar')();

// scoped method execution with call([scope,arguments[]]), takes arguments with comma separation
$('#foo').data('bar').call($('#foo').first()[0],'arguemnts','for','method');

// scoped method execution with apply(scope[,argument[]]), takes an array of arguments
$('#foo').data('bar').apply($('#foo').first()[0],['arguemnts','for','method']);

Apply Method: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

Call Method: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

edited Nov 12, 2012 at 16:08

answered Jul 14, 2011 at 14:23

Boss Ninja

1711 silver badge6 bronze badges

3 Comments

noir Over a year ago

Upvote for storing and calling functions using .data. However, I tried this and when you call a function stored this way $('#foo').data('bar')(); it looses its context. $(this) now refers to the DOMWindow, not $(#foo). Kobi's solution however keeps the function's context for $(this).

Boss Ninja Over a year ago

yeah, that's not how to keep it in scope, you'll need to use the call or apply method to keep the execution in scope.

Mou Over a year ago

which jquery version is required for data() attribute

Collectives™ on Stack Overflow

Storing a function with jQuery data() method

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related