javascript将函数传递给onclick事件

我必须编写一个函数来创建

a

标记的HTML代码，该函数还将向已创建

a

标记的

onclick

事件传递函数处理程序。 代码：

函数a（文本，函数处理程序）{
返回“”；
}
//用法
变量a1=a（'link'，function（）{
警报（“测试”）；
});

将函数传递给字符串不起作用。 因此，我的问题是：

如何将函数句柄传递给onclick事件并获取已创建标记的HTML代码？

函数a（文本，函数）{
     function a(text,function){
        return '<a href="#" onclick="myfunction();">'+text+'</a>';
     }

     function myfunction() {
        alert('test');
     }

返回“”；
}
函数myfunction（）{
警报（“测试”）；
}

您当前的方法有几个问题-

函数

是一个关键字。不能将其用作参数

按照您使用它的方式，这里需要函数名。传递回调不会有帮助

不要将锚点作为字符串返回，而是将其作为元素返回-

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

请参阅和上的文档

编辑

如果要将此锚元素作为子元素添加到现有DOM元素中，请使用-

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>';
}

函数a（文本，回调）{
返回“”；
}

只需在匿名函数上使用toString（）即可获取其代码

这是一种非常粗糙的方法，在命名函数上不起作用（现在让它起作用并不难）

---

FIDDLE

我找到了另一种使用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')
}

函数addActionButton（标题、工具提示、回调）{
el=jQuery（“”{
类别：“btn btn大纲二级”，
标题：工具提示
});
el.点击（回调）；
html（标题）；
el.附录（“#按钮栏”）
}

正如您所见，它不适用于未命名函数是的，您的小提琴可以工作，但我需要创建的

a

标记的html代码您的答案是最好的，但我仍然无法将其标记为已接受，因为此解决方案适用于appendChild…@BjörnRoberg long story，兄弟；）@大卫：这是一件坏事吗？函数是一个保留关键字，请使用其他类似函数名的东西。你尝试过我上次的更新吗？此外，您应该更改问题的标题，以便更准确地说明您需要返回包含事件函数的HTML代码。您好！所以在答案中“只写代码”是不好的做法。你能多加一点背景吗？通常，对你所做的一点解释就足够了。谢谢

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)}