StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy jQuery.data() bugs with Raphael svg paths?
text
Body
copied!<p>I have a problem with <a href="http://api.jquery.com/data/#data-html5" rel="nofollow">jQuery .data()</a> and <a href="http://raphaeljs.com/reference.html#Paper.path" rel="nofollow">Raphael's SVG path()</a>.</p> <p>I wrote a <a href="http://jsfiddle.net/NFQRH/" rel="nofollow">little example</a> to explain.</p> <pre><code>paper = Raphael(0, 0, 600, 600) polygon = paper.path('M19,20L24,83L106,62L112,23Z') polygon.data('test', 'I need this info later!') polygon.attr({"fill":"orange"}) $(document).on('click', onClick) function onClick() { console.log('click') if(event.target.nodeName === 'path') { // how do i get data('test') ? // console.log(this.data('test')) // Uncaught TypeError: Object #<HTMLDocument> has no method 'data' console.log($(this).data('test')) // undefined // console.log(event.target.data('test')) // Uncaught TypeError: Object #<SVGPathElement> has no method 'data' console.log($(event.target).data('test')) // undefined // But jquery.remove() does work? $(event.target).remove() } } </code></pre> <p>As you can see, I made a polygon, filled it with a color, and added an event listener to the document. On every click I check the target. If this is a polygon, I want to get its data.</p> <p>Notice that in my real code, I generate tons of polygons like this. So a simple <code>polygon.data()</code> won't help. My only solution is using the event.target as reference. <a href="http://jsfiddle.net/NFQRH/1/" rel="nofollow">Example of multiple polygons</a></p> <p>How can I receive the data values?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload