javascript - 如何从 onclick 字符串引用 javascript 对象函数

Question

我有一个对象，我在其中构建 html，并希望将 div 标签绑定(bind)到 onclick，但似乎找不到正确的方法。

 function person(obj){
    this.init(obj);
 }

 person.prototype = {
     init: function(){
      var html = '';
      for(i = 0; i < obj.length; i++){
         html += '<div onclick="myFunction()">'+obj[i].name+'</div>';
      }

        $(html).appendTo('.people');

        function: myFunction(){
          console.log('hello');
        }
 }

绑定(bind) myFunction() 并使其工作的最佳方法是什么？我尝试将函数嵌套在 init() 中，并尝试将其置于与 init 函数相同的级别。我意识到 div 还没有在 dom 中，所以它没有注册，但我想找到最好的方法来做到这一点。

Answer 1

如果您创建元素而不是 HTML 代码，则可以直接绑定(bind)事件处理程序，而不是使用要求该函数为全局的 onclick 属性。通过直接绑定(bind)它，您可以将该函数放置在绑定(bind)代码可以到达的任何地方，甚至可以放置在 init 函数内部:

function person(obj){
  this.init(obj);
}

person.prototype = {
  init: function(obj){ // <- note the parameter

    function myFunction(){
      // ...
    }

    $('.people').append(
      $.map(obj, function(o){
        return $('<div>').text(o.name).click(myFunction);
      })
    );
  }
}