Question

我必须编写一个函数来创建a标记的HTML代码，此函数还会将函数处理程序传递给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?

Answer 1

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

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

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

Live Fiddle

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/

Answer 3

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

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

Answer 4

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

Answer 5

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

javascript将函数传递给onclick事件

5 个答案: