jQuery mouseleave firing multiple times

Question

I have an svg container with multiple child elements that I attached a jQuery event handler to (.mouseleave). It works, but every time it gets fired, the following execution it get fired multiple times... so, the first time mouseleave gets triggered, it fires once as expected, but the second time it fired twice, the third time three times, and so on. I have no idea what's causing this and wasn't able to find anything by googling. Here's a screenshot and the code:

Answer 1

I'm pretty sure your problem arises due to multiple attachments of event listeners to your dom elements. Try adding this before the $('#svgArcs').mouseleave(function(e){ line:

$('#svgArcs').off('mouseleave')

That should fix it.