Event delegation on SVG Elements

Question

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 1

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.