JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<p>Click on a box. (This is embedded SVG)</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).delegate('#by-id', 'click', function() {
    alert('delegated class selector');
});

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


// See http://jsfiddle.net/rodneyrehm/cm9Gv/ for jQuery 1.7 where this doesn't work