![](/img/trans.png)
[英]how to pass a variable function to an onclick event in javascript?
[英]javascript pass function to onclick event
我必须写,这将创建的HTML代码的函数a
标记,此功能也将传递一个函数处理程序onclick
事件的创建a
标签。 代码:
function a(text,functionHandler){
return '<a href="#" onclick="'+functionHandler+'">'+text+'</a>';
}
//usage
var a1 = a('link',function(){
alert('test');
});
将函数传递给字符串不起作用。 所以我的问题是: how to pass a function handle to onclick event and get a HTML code of created a tag?
您目前的方法有几个问题 -
function
是一个关键字。 您不能将其用作参数。与其将锚作为字符串返回,不如将其作为元素返回 -
function createAnchor(text, clickHandler) {
var link = document.createElement('a'); // creates an anchor element
link.href = "#"; // sets the href
link.onclick = clickHandler; // sets the click handler
link.innerHTML = text; // assigns the inner html string
return link; // now return it
}
接着 -
var myAnchor = createAnchor('link', function () {
alert('test');
});
// Add this element wherever you want
请参阅有关createElement和element的文档。
编辑
如果要将此锚元素作为子元素添加到现有 DOM 元素,请使用appendChild -
var myAnchor = createAnchor('link', function () {
alert('test');
});
document.getElementById('x').appendChild(myAnchor);
编辑 2
如果你真的想要你的锚字符串,那么使用上面的函数创建锚元素,将它作为子元素附加到你想要的元素,然后在父元素上使用innerHTML
。 该方法在这里演示 -
function createAnchorString(parentId, text, clickHandler) {
var link,
parent;
link = createAnchor(text, clickHandler); // call the previous function
parent = document.getElementById(parentId);
parent.appendChild(link);
return parent.innerHTML;
}
var myAnchorString = createAnchorString('x', 'link', function () {
alert('test');
});
alert(myAnchorString);
你可以这样尝试:
function a(text, callback)
{
var obj = document.createElement("a");
obj.textContent = text;
obj.onClick = callback;
return obj.outerHTML;
}
问题是:它将如何处理作为回调参数传递的匿名函数?
编辑这应该现在工作:
function a(text, callback){
return '<a href="#" onclick="if(!this.fireFunc)this.fireFunc='
+ callback.toString()
+ ';this.fireFunc();">'+text+'</a>';
}
只需在匿名函数上使用 toString() 就可以获取其代码。
这是一种非常hackish的方式,并且不适用于命名函数(现在让它工作并不难)。
function a(text,function){
return '<a href="#" onclick="myfunction();">'+text+'</a>';
}
function myfunction() {
alert('test');
}
我找到了另一种使用 jquery 的方法
function addActionButton(caption, tooltip, callback) {
el = jQuery('<a/>', {
class: 'btn btn-outline-secondary',
title: tooltip
});
el.click(callback);
el.html(caption);
el.appendTo('#buttonbar')
}
function foo(para1){
console.log(para1)
}
let bar = "hello world"
someElement.onclick = function (){foo(bar)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.