Question

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.

Answer 1

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