Starx Starx - 2 months ago 26
Javascript Question

Event delegation on SVG Elements

I am trying to have a common click handler for all the elements I am appending to a SVG canvas. But I cannot delegate the handler to the newly created elements.

This is the code I have tried to delegate, but no luck

$("#floor").on('click','.drawnLine', function() {
//#floor is the SVG Element
//.drawnLine is the <line> element that is added dynamically
console.log($(this).data('index'));
});


Update:
On the jQuery manual of
.on()
it is mentioned that


Note: Delegated events do not work for SVG.


So now the question is any other workaround for this problem?

Answer

When jQuery fails with SVG you can use vanilla js. Fortunately every browser that supports svg also supports event listeners. The pure js delegated event is not so ugly:

$("#floor")[0].addEventListener('click', function(e) {
  // do nothing if the target does not have the class drawnLine
  if (!e.target.classList.contains("drawnLine")) return;
  console.log($(this).data('index'));
});

But you can also create your own function to delegate your events more cleanly.

Comments