title: raphael.js jquery how to assign and access id
body: <p>The raphael.js documentation seems to warn against using element.node but it seems to be the only way to call an event.  I created a jsFiddle that assigns 3 different shapes an id using 3 different methods: .attr, .data, and .node.id.  </p>
  
  <p>The .attr method I get an undefined alert for the id and no response for the click event.</p>
  
  <p>The .data method I get the correct alert id but an undefined alert for the click.</p>
  
  <p>The .node.id I get the correct alert id and the correct alert for the click.</p>
  
  <p>Can someone please help me with which method is best to use (and if .node.id is ok) and the correct way to target these shapes using jquery.</p>
  
  <p>html:
      
      
      
      Square
      
      Rectangle
      
      Circle
      </p>
  
  <p>jquery/raphael</p>
  
  <pre><code>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();
  }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/adam123/9wUJN/115/" rel="nofollow">http://jsfiddle.net/adam123/9wUJN/115/</a> </p>