javascript - 动态添加时 onclick 事件不起作用

Question

我尝试通过 onclick 属性绑定(bind)函数，但收到函数未定义错误。 fiddle

(function() {
  function getInfo(x) {
    console.log(x)
  }

  function a() {
    var x = [{
      "name": "main",
      "data": ['1', '2', '3']
    }, {
      "name": "sub",
      "data": ['4', '5', '6']
    }, {
      "name": "lower",
      "data": ['7', '8', '9']
    }]
    for (var i = 0; i < x.length; i++) {
      var data = "<span onclick='getInfo(" + x[i].data + ")'>main </span>";
      data += "<span onclick='getInfo(" + x[i].data + ")'>sub </span>"
      data += "<span onclick='getInfo(" + x[i].data + ")'>lower</span><br>"
      $('#data').prepend(data);
    }


  }
  a()
})()

Answer 1

我认为您得到 undefined 的原因是因为 onclick 会尝试在全局范围内查找该函数，而您的 getInfo 函数是在函数范围内定义的。

那么您应该将 getInfo 设置为全局范围(window)的属性来解决该问题。例如:

window.getInfo = function(x) {
    console.log(x)
}

在此处查看更新的 fiddle.js:https://jsfiddle.net/fddr0bnv/6/