Запись функции в виде строки в javascript

Question

Я хотел бы создать контекстное меню. Это меню появляется, когда пользователь нажимает на любой из узлов в дереве. Каждый узел имеет класс «treedropdownmenu». При нажатии на узле контекстное меню должно открываться. Я передаю метод «_deleteClick» с опцией меню «Удалить». Но это вызывает у меня ошибку: меню «_deleteClick» не найдено.

Я следующий штраф кода в моем виджете:

$(".treedropdownmenu").live("click", function (event) { 
    var pos; 
    if(($(window).height() - event.pageY) < 80) { 
     pos = { 
      left: event.pageX + 20, 
      top: event.pageY - 60 
     }; 
    } else { 
     pos = { 
      left: event.pageX + 20, 
      top: event.pageY + 20 
     }; 
    } 
    if(ko.dataFor(this).nodeId() && ko.dataFor(this).nodeId() !== 0) { 
     var item = ko.dataFor(this); 
     var strHtml = "<a href='#' onclick='_deleteClick(item)'>Delete:</a> " + "<br/>" + "<b>Create Date:</b>" + "<br/>" + "<b>Exposed Party Name:</b>" + "<br/>" + "<b>Portfolio Type:</b>" + "<br/>" + "<b>Owner:</b>"; 
     $("#dataManagerMenuItem1234").show().offset(pos).html(strHtml); 
    } 
}); 

меню удаления у меня есть:

function _deleteClick(item) { 
    alert("delete clicked"); 
} 

Может кто-нибудь, дайте мне знать, где я буду неправильно?

Answer 1

Да, я не думаю, что это сработает. Попробуйте следующее:

var strHtml = "<a href='#'>Delete:</a> " + "<br/>" + "<b>Create Date:</b>" + "<br/>" + "<b>Exposed Party Name:</b>" + "<br/>" + "<b>Portfolio Type:</b>" + "<br/>" + "<b>Owner:</b>"; 
$("#dataManagerMenuItem1234").show().offset(pos).html(strHtml).find('a').click(function() { _deleteClick(item); }); 

Answer 2

Не добавляйте обработчик событий в строку, это плохая практика.

var strHtml = "<a href='#'>foo</a>; 
var lnk = jQuery(strHtml); 
lnk.on("click", function(){ _deleteClick(item); }); 
$("#dataManagerMenuItem1234").show().offset(pos).append(lnk); 

Answer 3

Это kindof неуклюжий способ добавления обработчика событий по ссылке, особенно , поскольку вы создаете его программно в любом случае. Почему бы не добавить динамический щелчок ?

var item = ko.dataFor(this); 
var deleteLink = $('<a>', { 
    href: '#', 
    click: function() { 
     _deleteClick(item); 
    }, 
    text: 'Delete:' 
}); 
$("#...").show().offset(pos).append(deleteLink); 

Answer 4

Вы не отвечал весь код здесь, но я предполагаю, что вы определили функцию _deleteClick в локальной области, и ваш обработчик OnClick не может получить к нему доступ из глобальной области видимости. Это одна из причин, почему вы не должны использовать атрибуты onclick для присоединения событий к элементам DOM! Ваш атрибут onclick, выписанный как строка, не будет выполняться в правильном контексте. Используйте jQuery для подписки.

Похоже, вы используете KnockoutJS. Еще лучший способ сделать это - использовать Knockout template, чтобы выписать ваше меню.