Как ссылаться на функцию объекта javascript из строки onclick

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 еще не в Доме, поэтому он не регистрируется, но я хотел бы найти лучший способ сделать это.

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 элементов, которые будут срабатывать когда один из их потомков дивы щелкают:

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

вы все равно получите индивидуальный DIV в качестве цели события, но ограничить количество обработчиков на странице. Это также больше не зависит от наличия div на странице при привязке события; пока элемент people существует, когда вы связываетесь и остаетесь там, вы можете перетасовать детей, не переписывая события.