Pass a callback function as a html data attribute

Question

I have created a DOM structure like this

<div data-execute="someFunction.abc" id="someId">
  </div>

I am able to retrive the attribute in js but I intend to execute this as a callback function. So I am doing like this

var x = document.getElementById("someId").getAttribute('data-execute');

As expected this is returning someFunction.abc .But on consoling typeof(x) it is showing "string".Please refer to this fiddle

var someFunction = function() {
  alert("Hello")
}
var load = (function(module, global) {
  var x = document.getElementById("someId").getAttribute('data-execute');
  console.log(typeof(x))

}(load || {}, this))

<div data-execute="someFunction.abc" id="someId">
  Some Function
</div>

I also checked this link Passing a Javascript function through inline data- attributes

But no way I am able to execute it as a call back function.Any help will be truly appreciable.

What is abc? It's a paremeter?

Irvin Dominin
– Irvin Dominin

2015-09-26 08:51:18 +00:00
Commented Sep 26, 2015 at 8:51 — Irvin Dominin
– Irvin Dominin, Commented Sep 26, 2015 at 8:51

slash197 · Accepted Answer · 2015-09-26 08:43:59Z

2

Try this:

<div data-execute="someFunction.abc" id="someId"></div>

var x = document.getElementById("someId").getAttribute('data-execute');
window[x].call();

answered Sep 26, 2015 at 8:43

slash197

9,0246 gold badges44 silver badges71 bronze badges

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

1 Comment

sinisake Over a year ago

This will work, but without .abc at the end. Not sure should it be parameter, maybe?

Irvin Dominin · Accepted Answer · 2015-09-26 10:49:18Z

2

You can use the call methodon the function defined in the global scope, you can access it in the global window ojbect.

Ref:

The call() method calls a function with a given this value and arguments provided individually.

I have assumed the code after the point is a paramter to pass to the function.

Code:

var someFunction = function (p) {
    alert(p)
}
var load = (function (module, global) {
    var x = document.getElementById("someId").getAttribute('data-execute');
    window[x.split('.')[0]].call(undefined, x.split('.')[1]);

}(load || {}, this))

Demo: https://jsfiddle.net/IrvinDominin/5bjsmu3x/

answered Sep 26, 2015 at 10:49

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Comments

Poupoudoum · Accepted Answer · 2023-07-06 15:49:07Z

0

I was struggling with the same question and I found this solution :

HTML :

<element data-call="return alert('callback');">

JS :

Function(YourElement.getAttribute('data-callback'))();

You can store it in a variable and add parameters too :

HTML :

<element data-call="return str.toUpperCase();">

JS :

var fn = Function("str", YourElement.getAttribute('data-callback'));
var returned = fn("Test String");

answered Jul 6, 2023 at 15:49

Poupoudoum

314 bronze badges

Collectives™ on Stack Overflow

Pass a callback function as a html data attribute

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related