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?

Michael Lorton · Accepted Answer · 2012-06-26 02:51:10Z

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); });

answered Jun 26, 2012 at 2:51

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wyatt Anderson · Accepted Answer · 2012-06-26 02:54:00Z

1

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);

answered Jun 26, 2012 at 2:54

Wyatt Anderson

9,9331 gold badge24 silver badges25 bronze badges

Comments

epascarello · Accepted Answer · 2012-06-26 02:51:56Z

0

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);

answered Jun 26, 2012 at 2:51

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

zetlen · Accepted Answer · 2012-06-26 02:59:24Z

0

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.

answered Jun 26, 2012 at 2:59

zetlen

3,61927 silver badges22 bronze badges

Collectives™ on Stack Overflow

Write function as a string in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related