Passing function with custom data attribute

Question

Is it possible passing a function with a custom data attribute?

This does not work:

<div data-myattr="hello();">
</div>

function hello(){
    console.log('hello');
}

When I get the attribute it's a string with the value "hello();" instead of the function. How to solve this?

Answer 1

You could do it as follows:

<div data-myattr="hello"></div>

function hello(){
    console.log('hello');
}

function executeFunctionFromData(){
    var d = 'hello' // Save `data-myattr` to d; (Obviously, this is just a hardcoded value as an example)
    window[d](); // Execute the function.
}

This works because the function hello is defined in the global scope, and as such, is a property of the window object.

Answer 2

<div id='some' data-my-function="function(x){console.log(x);}"></div>

js:

var myfunction = $('#some').data('my-function');

if(myfunction != undefined){     
    eval("myfunction = "+myfunction, myfunction);    
}

if(typeof myfunction ==="function") {
    myfunction('Cristo Rabani!');
}