Question

我有一个对象，我在其中构建html并希望将div标签绑定到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');
        }
 }

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

Answer 1

如果创建元素而不是HTML代码，则可以直接绑定事件处理程序，而不是使用要求函数为全局的onclick属性。通过直接绑定它，您可以将函数放在绑定代码可以到达的任何位置，甚至可以在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);
      })
    );
  }
}

Answer 2

由于你有jQuery，你可以使用它将处理程序绑定到.people元素，当点击其中一个后代div时将触发这些元素：

$('.people').on('click', 'div', myFunction);

您仍然可以将单个div作为事件目标，但是您可以限制页面上的处理程序数量。当你绑定事件时，这也不再依赖于页面上的div;只要绑定并保留在那里时people元素就在那里，你就可以在不需要重新绑定事件的情况下对孩子进行洗牌。

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

2 个答案: