Click event not fired on button with svg element in Safari

Question

In Safari click event not fired on button with svg element. When you click on buttons edge click event fires, but if you click on svg element itself does not.

$(document).on('click', 'button', function(e) {
    console.log(e);
});

It works if I attach click event like this:

$('button').on('click', function(e) {
    console.log(e);
});

Because of buttons added dynamically I can't do like this;

Example in codepen.io http://codepen.io/neilhem/pen/bdGYPq

jQuery version 2.1.3

Answer 1

I don't know is it the best way to solve this problem, but adding pointer-events: none; to svg element solved problem.

svg {
  pointer-events: none;
}

Answer 2

svg {
  pointer-events: none;
}

What can be the better solution for this? I've encountered this often.

This worked for me.