raphael.js jquery how to assign and access id -

the raphael.js documentation seems warn against using element.node seems way call event. created jsfiddle assigns 3 different shapes id using 3 different methods: .attr, .data, , .node.id.

the .attr method undefined alert id , no response click event.

the .data method correct alert id undefined alert click.

the .node.id correct alert id , correct alert click.

can please me method best use (and if .node.id ok) , correct way target these shapes using jquery.

html: square rectangle circle

jquery/raphael

var p = raphael("test");  $(':radio[name="shapes"]').on('click', function () { var shapename = $(this).attr('id');  //test attr id if (shapename == "square") {     var test1 = p.rect(10, 10, 40, 40);     test1.attr('fill', 'black');     test1.attr('id', 'help1');     var data1;     data1 = test1.attr('id');     alert(data1);     $(test1.node).click(confirmfunc3, removeothernodes); } //test node.id else if (shapename == "rectangle") {     var test2 = p.rect(200, 20, 50, 80);     test2.attr('fill', 'blue');     test2.node.id='help2';     var data2;     data2 = test2.node.id;     alert(data2);     $(test2.node).click(confirmfunc); } //test data id else if (shapename == "circle") {     var test3 = p.circle(100, 100, 40);     test3.attr('fill', 'red');     test3.data('id', 'help3');     var data3;     data3 = test3.data('id');     alert(data3);     $(test3.node).click(confirmfunc2); }  function confirmfunc() {     alert(this.id); } function confirmfunc2() {     alert($(this).data('id')); } function confirmfunc3() {     alert($(this).attr('id')); } function removeothernodes() {     $('#help2').remove();     $('#help3').remove(); } }); 

http://jsfiddle.net/adam123/9wujn/115/

1) it's ok element.node.id = "abc" if need access element later via jquery - $('#abc').on("click", dosomething);

2) why need use jquery event handlers when can use raphael?

raphaelelement.mousedown(eventhandlerfunction);  

or

raphaelelement.mousedown(function(e){    ... });  

3) can this:

raphaelelement.id = "abc"; var thatelement = paper.getbyid("abc"); thatelement.mousedown(function(e){    ... });