JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<script src="http://oscargodson.com/labs/jkey/jquery.jkey-1.2.js"></script>
<div id="hmm">
    <p>
        Once upon a time there was a man
        who lived in a pizza parlor. This
        man just loved pizza and ate it all 
        the time.  He went on to be the
        happiest man in the world.  The end.
    </p>
    <div id="edit"><div id="ed1">Edit 1</div><div id="ed2">Edit 2</div></div>
</div>
<div id="get">mm</div>

CSS

#hmm{
    background:cyan;
}
#edit{
    position:absolute;
    top:0px;
    right:5px;
    background:black;
    color:white;
    z-index-1;
    display:inline-block;
}
#ed1,#ed2 {
    display:block;
}

JavaScript

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span class='la'>");
$("p:first").html("<span class='la'>" + text + "</span>");
function spanclick(){
    $(this).html('<input class="mm" value="' + $(this).text() + '"/>');
    $(this).unbind("click");
}
$("#hmm").delegate("span.la","click",spanclick);
$("span.la").unbind("click");
$("#hmm").delegate(".mm", "blur", function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>");
    $(this).bind("click");
    $("#get").html($("p").text());
});
$("#ed1").click(function() {
    $("#get").html("Editing 1");
    console.log('aaa');
    $("span.la").bind("click", spanclick);
});
$("#ed2").click(function() {
    $("#get").html("Editing 2");
});