JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<script src="http://jquery-in-place-editor.googlecode.com/svn/trunk/lib/jquery.editinplace.js"></script>
    	<div class="inplace-editor">
            <h1>My Personal Bucketlist: Things I Want to do Before I Die</h1>
            <ul id="todolist">
                <li class="edit">The edit in place only seems to work when you Add an item, edit THIS one, and then edit the new ones?</li>
                <li class="edit">Any suggestions? I can't figure this one out</li>
            </ul>       
            <input type="text" id="new-text"/><button id="add">Add</button>
    	</div>

JavaScript

function addListItem() {
    var text= $("#new-text").val().trim();
    if(text === ""){
        return;
    }
    $("#todolist").append('<li class="edit"><input type="checkbox" class="done"/> '+text+' <button class="delete">Delete</button></li>');
    $("#new-text").val('');
}

function deleteItem() {
    console.log(this);
    $(this).parent().remove();	
}

function finishItem() {
    if ( $(this).parent().css('textDecoration') == 'line-through' ) {
        $(this).parent().css('textDecoration', 'none');
    } else {
        $(this).parent().css('textDecoration', 'line-through');
    }
}

function editTodo() {
    //The most basic form of using the inPlaceEditor
    $(".edit").editInPlace({
        callback: function(unused, enteredText) { return '<li class="edit"><input type="checkbox" class="done"/> '+enteredText+' <button class="delete">Delete</button></li>'; },
        url: './server.php',
        show_buttons: true
    });
}

$(function() {
    $("#add").on('click',addListItem);
    $(".delete").on('click',deleteItem);
    //$(".done").on('click',finishItem);
    //$('.edit').on('click', editTodo);
    $(document).on('click', '.edit', editTodo);
    $(document).on('click', '.done', finishItem);
    $(document).on('click', '.delete', deleteItem);
});