[英]Pass javascript function as data-* attribute and execute
We know such syntaxes as below, when defining a value
for onClick
attribute: 在为onClick
属性定义value
时,我们知道如下语法:
<button type="submit" onclick="alert('hi');"></button>
<button type="submit" onclick="doWork"></button> <!-- This one doesn't work -->
<button type="submit" onclick="doWork()"></button>
<button type="submit" onclick="doWork('Mike', 2)"></button>
What I'm interested in is to define a custom data-attribute
and execute the value as follows: 我感兴趣的是定义自定义data-attribute
并执行如下值:
<button type="submit" data-callback="alert('hi');" class="marker"></button>
<button type="submit" data-callback="doWork" class="marker"></button>
<button type="submit" data-callback="doWork()" class="marker"></button>
<button type="submit" data-callback="doWork('Mike', 2)" class="marker"></button>
<script type="text/javascript">
jQuery("body").on("click","button.marker", function(e) {
var callback = jQuery(e.currentTarget).data("callback");
// Now I need to execute the callback no matter of the format
// 1. Execute as function's body
// 2. Or by function 'name'
// 3. Or by function 'name' with 0 parameters
// 4. Or by function 'name' with n parameters
})
function doWork(name, nr){
var personName = name || "Unnamed";
var personNr = nr || 0;
alert("Name is: " + personName + " Nr: " + personNr);
}
</script>
I've pasted the sample to jsBin 我已将样本粘贴到jsBin
One way is to use eval() 一种方法是使用eval()
jQuery(".container").on("click", "button.marker", function (e) {
var callback = jQuery(e.currentTarget).data("callback");
var x = eval(callback)
if (typeof x == 'function') {
x()
}
});
Note: Make sure it is safe in your environment, ie there is no possibility of script injection because of bad input from users 注意:确保它在您的环境中是安全的,即由于用户输入错误而无法注入脚本
I think a better idea would be to dynamically bind the events and trigger them. 我认为更好的想法是动态绑定事件并触发它们。 If you wanted them to only be known by other code, you could use custom events. 如果您希望它们仅为其他代码所知,则可以使用自定义事件。
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $('.marker');
$markers.filter('.marker1').bind('customCallback', function(){ alert("hi"); });
$markers.filter('.marker2').bind('customCallback', function(){ doWork(); });
</script>
Then your other components could invoke them with $(selector).trigger('customCallback'); 然后你的其他组件可以使用$(selector).trigger('customCallback')调用它们;
Simply with : 只需:
$("body").on("click","button.marker", function(e) {
eval($(this).data("callback"));
})
If you really wanted to pass functions (with or without parameters) from one thing to another without binding them as events you could do it this way (I started from @Taplar's answer) 如果你真的想将函数(有或没有参数)从一件事传递到另一件事而不将它们作为事件绑定它们就可以这样做(我从@Taplar的答案开始)
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $('.marker');
$markers.filter('.marker1').get(0).customCallback = doWork;
$markers.filter('.marker2').get(0).customCallback = function(){
doWork(arg0,arg1);
};
</script>
Then you could access them in your other component as: 然后,您可以在其他组件中访问它们:
<script>
$('.marker').each(function(){
var thisFunction = $(this).get(0).customCallback;
//do something useful with thisFunction
});
</script>
You can just bind a function as a data attribute 您只需将函数绑定为数据属性即可
const ele = $('button');
ele.data('onClick', evt => {
alert('bye');
})
ele.click(evt => {
const ele = $(evt.target);
ele.data('onClick')(evt);
})
Another way is using window[func](args)
. 另一种方法是使用window[func](args)
。
Similar to the eval()
, but you will have to store the function name and the argument separately in the HTML attribute. 与eval()
类似,但您必须将函数名称和参数分别存储在HTML属性中。
Here is a quick example... CodePen 这是一个简单的例子...... CodePen
<button type="submit" data-func="Angel" data-args='use me instead of evil()' class="marker">TEST</button>
<script type="text/javascript">
//=== The Listener =====
$(".marker").on("click",function(){
// Get the function name and arguments
let func = $(this).attr("data-func");
let args = $(this).attr("data-args");
// Call the function
window[func](args);
})
//=== The Function =====
function Angel(msg){
alert(arguments.callee.name + " said : " + msg);
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.