How To Access Id Attribute Of Any Element In Raphael

I'm using Raphael for drawing some elements on a website. The elements include rectangle, line (path). I have given an id to the path element and trying to access it in the onclick

Solution 1:

Are you sure you don't want to write $(t.node).attr('id','Hello'); instead?

Update: someone just downvoted this answer. And I truly feel obligated to point out this way of setting the id isn't particularly good. You would be better off using:

t.node.id = 'Hello';

I wish there was a way to credit Juan Mendes, other than upvoting his comment to this answer.

Solution 2:

Try this:

functioncreateLine()  { 
    var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
    t.attr('stroke-width','3');
    t.id = 'Hello';
    t.node.onclick = processPathOnClick;
}

functionprocessPathOnClick() {
    alert($(this).id);
    alert(this.id); // This should work too...
}

Basically you are creating a new property called "id" on your Raphael line instance variable "t". It's kind of hacking, in my opinion, but it does the trick just fine.

Solution 3:

Try setting the handler using jquery

functioncreateLine() 
{ 
  var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
  t.attr('stroke-width','3');
  t.attr('id','Hello');
  $(t.node).click(processPathOnClick);
}

functionprocessPathOnClick() 
{
    alert($(this).attr("id"));
}