I have the following div:

<div id="foo" data-callback="function(){console.log(1)}"></div>

I want to be able to execute the div's callback string as a JavaScipt function like this:

($('#foo').data('callback'))()

But this obviously won't work. Is there any way to do this?

Here's a JSFiddle.

I have the following div:

<div id="foo" data-callback="function(){console.log(1)}"></div>

I want to be able to execute the div's callback string as a JavaScipt function like this:

($('#foo').data('callback'))()

But this obviously won't work. Is there any way to do this?

Here's a JSFiddle.

• javascript
• jquery

Share Improve this question Follow asked Apr 24, 2012 at 19:11 HellaMadHellaMad 5,39466 gold badges3333 silver badges5454 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

I suggest not storing code as a data- attribute. Make a function, then just store the function name as the attribute.

<script>
function callbackA(){
    console.log(1)
}
</script>
<div id="foo" data-callback="callbackA"></div>

Then you can do window[$('#foo').data('callback')]().

EDIT: If you don't want to do this, you can also make use of the onclick event (or any (built-in) event for that matter).

<div id="foo" onclick="console.log(1)"></div>

Then you can use .prop to get the event (as a function), and then use it.

var callback = $('#foo').prop('onclick'); // get function
$('#foo').removeProp('onclick'); // remove event
callback();  // use function

One, potentially crazy :), solution would be to use js.js. This would be more secure than eval.

If you can alter the html to

<div id="foo" data-callback="{console.log(1)}"></div>

then you can do

new Function($('#foo').data('callback'))()

---

But why do you need to do it that way ?

What you have can be done using eval, but eval is evil.

Edit:

And some modifiction is required to your HTML,

<div id="foo" data-callback="(function (){console.log(1)})"></div>

JS

eval($('#foo').data('callback'))();

DEMO

You could always use the Function constructor, however, you will need a string containing only your statements. You can either parse your existing string or even better, if you can modify the value of that data attribute at the source. Then you would do

var fn = new Function($("#foo").data("callback"));
fn();

Updated JSFiddle