内联onclick处理程序不起作用

Question

我想使用INLINE回调函数，因此，我具有以下html标记：

    var callback = function (index) {
        return function () {
            return action.delete({
                index: index
            })
        }
    }
    var markup = items.map(function (item, index) {
        return ('<button onclick="return ' + callback(index) + ';">Delete</button>')
    }).join('\n') 

    document.getElementById('main').innerHTML = markup

但是，当我单击按钮时，我的回调不起作用。 上面的代码有什么问题？ 谢谢。

Answer 1

在您的情况下， callback(index)返回函数，但是当它与字符串连接时，隐式调用函数的.toString()方法并将函数主体作为字符串返回。

您的代码应如下所示：

var callback = function (index) {
     return action.delete({
        index: index
     });
}
var markup = items.map(function (item, index) {
    return ('<button onclick="return callback(' + index + ');">Delete</button>')
}).join('\n') 

document.getElementById('#main').innerHTML = markup

在这种情况下，必须在全局范围内定义callback函数。

最好使用addEventListener设置click事件的侦听器功能。