CODEWITHSUNDEEP
javascriptjquery
Anirban
Anirban

Reputation: 589

Write function as a string in javascript

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?

Upvotes: 0

Views: 107

Answers (4)

zetlen
zetlen

Reputation: 3619

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.

Upvotes: 0

Wyatt Anderson
Wyatt Anderson

Reputation: 9893

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

Upvotes: 1

epascarello
epascarello

Reputation: 207521

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

Upvotes: 0

Michael Lorton
Michael Lorton

Reputation: 44396

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

Upvotes: 1

Related Questions