JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click a rectangle to check <code>[class~=selected]</code> delegation.</p>

<svg style="overflow-x: hidden; overflow-y: hidden; position: relative; " height="301" version="1.1" width="1280" xmlns="http://www.w3.org/2000/svg">
    <rect 
        x="10" 
        y="20"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#ff0000"
        stroke="#ff0000"
        class="selected"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
    <text x="120" y="50" dy="0.5ex">class="selected"</text>

    <rect 
        x="10" 
        y="90"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#0000ff"
        stroke="#0000ff"
        class="unselected"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
    <text x="120" y="120" dy="0.5ex">class="unselected"</text>
</svg>

JavaScript

$(document.body).on('click', '[class~=selected]', function() {
    alert('delegated [class~=selected]');
});