Rakhat
Rakhat

Reputation: 4942

Click event not fired on button with svg element in Safari

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

Upvotes: 22

Views: 11715

Answers (2)

Rakhat
Rakhat

Reputation: 4942

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;
}

Upvotes: 56

Alejandro Yunes
Alejandro Yunes

Reputation: 85

svg {
  pointer-events: none;
}

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

This worked for me.

Upvotes: 3

Related Questions