Menu
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?
323
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
Click the left circle (inside the padding) and event. target. nodeName == svg ; click the right circle (in the svg proper) and event.
Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.
Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the . target property of the event object.
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.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
