将函数作为JavaScript传递给onclick事件

Question

我需要编写一个函数，用于创建一个 a 标签的 HTML 代码，并将该函数处理程序传递给创建的 a 标签的 onclick 事件。 代码：

function a(text,functionHandler){
    return '<a href="#" onclick="'+functionHandler+'">'+text+'</a>';
}

//usage
var a1 = a('link',function(){
   alert('test');
});

将函数传递给字符串无效。因此，我的问题是：如何将函数句柄传递给onclick事件，并获取创建a标签的HTML代码？

- David

---

函数是一个保留关键字，请使用其他名称，如 functionName。 - BenM

你试过我的最新更新了吗？另外，你应该更准确地将你的问题标题改为需要返回包含事件函数的HTML代码。 - kube

Answer 1

你当前的方法存在几个问题 -

1. function 是一个关键字，不能用作参数。
2. 你使用的方式需要函数名。传递回调函数是没有帮助的。

不要将你的锚点返回为字符串，而应该返回为元素 -

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

JSFiddle实时演示。

编辑 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);

实时演示。

- MD Sayem Ahmed

---

http://jsfiddle.net/dejwid/aswXT/，正如您所看到的，它无法与未命名函数一起使用。 - David

是的，你的fiddle可以工作，但我需要创建a标签的HTML代码。 - David

你的答案是最好的，但我仍然无法将其标记为已接受，因为此解决方案适用于appendChild... - David

@BjörnRoberg 兄弟，长话短说 ;) - David

@David：那是一件坏事吗？ - MD Sayem Ahmed

Answer 2

你可以试试这样做：

你可以尝试这样做：

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的方法，不适用于命名函数（现在让它工作起来并不难）。

FIDDLE http://jsfiddle.net/gZ3YD/1/

- kube

Answer 3

我发现另一种使用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')
}

- SoSen

Answer 4

     function a(text,function){
        return '<a href="#" onclick="myfunction();">'+text+'</a>';
     }

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

- syned

Answer 5

function foo(para1){
    console.log(para1)
}
let bar = "hello world"
someElement.onclick = function (){foo(bar)}

- Allen Zheng

---

嗨！所以...在答案中“只放代码”是一个不好的做法。你能加一点更多的上下文吗？通常，简短的解释就足够了。谢谢！ - spersico