JSFiddle - React, Tailwind, and code Playground

HTML

<p>jQuery 1.7 has a bug in delegated events. While it is possible to adress an SVG's rect by ID, it won't work with a class selector</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="by-class"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>

    <rect 
        x="10" 
        y="90"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#0000ff"
        stroke="#0000ff"
        id="by-id"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
</svg>

JavaScript

$(document.body).on('click', '#by-id', function() {
    alert('delegated id selector');
});

$(document.body).on('click', '.by-class', function() {
    alert('delegated class');
});

// See http://jsfiddle.net/rodneyrehm/ydmXA/ for jQuery 1.6.4 where this works 

/*
// same with .delegate():
$(document.body).delegate('#by-id', 'click', function() {
    alert('delegated class selector');
});

$(document.body).delegate('.by-class', 'click', function() {
    alert('delegated id selector');
});
*/