Write function as a string in javascript

Question

I would like to create a context driven menu. This menu comes when the user clicks on any of the nodes in the tree. Each node has a class "treedropdownmenu". On node clicked, the context driven menu should open up. I am passing a method "_deleteClick" with the Delete menu option. But it is throwing me an error : "_deleteClick" menu not found.

I have following fine of code in my widget :

$(".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);
    }
});

The delete menu I have is :

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

Can anyone let me know where am I going wrong?

Answer 1

Yeah, I don't think that will work. Try this:

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

This is kindof a clumsy way of adding an event handler to the link, especially since you're creating it programmatically anyways. Why not add the click handler dynamically, like so?

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

Answer 3

Do not addthe event handler in a string, that is bad practice.

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

Answer 4

You haven't posted all your code here, but I assume you have defined the function _deleteClick in a local scope, and your onclick handler cannot access it from the global scope. This is one of the reasons why you shouldn't use onclick attributes to attach events to DOM elements! Your onclick attribute, written out as a string, is not going to execute in the right context. Use jQuery to subscribe instead.

It looks like you're using KnockoutJS. An even better way to do this would be using a Knockout template to write out your menu.