Почему jQuery.data() ошибки с путями Raphael svg?

Question

У меня проблема с jQuery .data() и Raphael's SVG path().

Я написал little example для объяснения.

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

    } 
} 

Как вы можете видеть, я сделал многоугольник, наполнил его цветом и добавил слушателя событий в документ. При каждом нажатии я проверяю цель. Если это многоугольник, я хочу получить его данные.

Обратите внимание, что в моем реальном коде я генерирую тонны таких многоугольников. Так что простой polygon.data() не поможет. Мое единственное решение использует event.target как ссылку. Example of multiple polygons

Как получить данные?

Answer 1

Вы были близки, вам просто нужен узел, обернутый в объекте JQuery, чтобы установить данные первыми:

$(polygon.node).data('test', 'I need this info later!'); 

Я обновленный ваш jsfiddle, чтобы показать его работу.