<div id='dgok' data-fn="delbanner('banners')">OK</div>
js
$('#dgok').click(function(){
let fn = $(this).attr('data-fn');
console.log(fn) // delbanner('banners')
fn();
});
Error:
Uncaught TypeError: fn is not a function
How to execute delbanner('banners') in this scenario (clicking on dgok)?
Avoiding eval you may try an approach based on accessing functions via some container (window for example):
const fnContainer = window;
$('#dgok').click(function(){
const fn = $(this).attr('data-fn');
const fnName = fn.substring(0, fn.indexOf('(')); // 'delbanner'
const fnArg = fn.substring(fn.indexOf('(') + 2, fn.length - 2); // 'banners'
if (typeof fnContainer[fnName] === 'function') {
fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
}
});
Here I assume that your function is defined on window and has 1 string argument.
Having function argument in a separate data-attribute the approach may look a bit simplier
const fnContainer = window;
$('#dgok').click(function(){
const fnName = $(this).attr('data-fn');
const fnArg = $(this).attr('data-arg');
if (typeof fnContainer[fnName] === 'function') {
fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
}
});
this error is correct fn is not function .
use this
$('#dgok').click(function(){
let fn = () => $(this).attr('data-fn');
console.log(fn) // delbanner('banners')
fn();
});
You could use eval but it's never a good idea. EVER
let fn = $(this).attr('data-fn');
eval(fn) // since fn is a string. it will evaluate whatever is in that string
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval
You need to use eval(fn) to treat that as a function call:
$('#dgok').click(function(){
let fn = $(this).attr('data-fn');
console.log(fn) // delbanner('banners')
eval(fn);
});
function delbanner(param){
console.log(param);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dgok' data-fn="delbanner('banners')">OK</div>Use eval.
Try this: :)
$('#dgok').click(function(){
let fn = $(this).attr('data-fn');
console.log(fn);
eval(fn);
});
You can use eval
function delbanner() {
console.log('m')
}
$('#dgok').click(function() {
console.log('a')
let fn = $(this).attr('data-fn');
eval(fn);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dgok' data-fn="delbanner('banners')">OK</div>
bannersis an argument of the function.eval, but it's not a great idea. Why do you need to pass functions around indata-attributes?