CODEWITHSUNDEEP
javascriptjqueryedit
Rassisland
Rassisland

Reputation: 167

To-Do list with edit button Jquery

I'm trying to make a to-do list with an edit button, that when clicked, will make added items editable, but am having trouble. I have the button created and everything, but when I click it nothing happens. Any advice would be greatly appreciated!

JavaScript

function editItem(){
    var parent = $(this).parent();
    if (!parent.hasClass('edit')) {
        parent.addClass('edit');
    }else if (parent.hasClass('edit')) {    
        var editTask = $(this).prev('input[type="text"]').val();
        var editLabel = parent.find('label');
        editLabel.html(editTask);
        parent.removeClass('edit');
    }

$(function(){
    $(document).on('click', 'edit', editItem)
});

Upvotes: 2

Views: 4669

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

Looks like you are targeting <edit>, you are supposed to use .edit:

$(function(){
    $(document).on('click', '.edit', editItem);
});

Working Snippet

$(function () {
  function addItem () {
    // append to the list
    $("#todo-items").append('<li><span>' + $("#todo").val() + '</span> <small><a href="#edit">Edit</a> &bull; <a href="#delete">Delete</a></small></li>');
    // clear the text
    $("#todo").val("");
  }
  $("#todo").keydown(function (e) {
    // if enter key pressed
    if (e.which == 13)
      addItem();
  });
  // on clicking the add button
  $("#add").click(addItem);
  // delegate the events to dynamically generated elements
  // for the edit button
  $(document).on("click", 'a[href="#edit"]', function () {
    // make the span editable and focus it
    $(this).closest("li").find("span").prop("contenteditable", true).focus();
    return false;
  });
  // for the delete button
  $(document).on("click", 'a[href="#delete"]', function () {
    // remove the list item
    $(this).closest("li").fadeOut(function () {
      $(this).remove();
    });
    return false;
  });
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; text-decoration: none;}
input, li {padding: 3px;}
#todo-items small {display: inline-block; margin-left: 10px; padding: 2px; vertical-align: bottom;}
#todo-items span:focus {background-color: #ccf;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="todo" />
<input type="button" value="Add" id="add" />
<ul id="todo-items"></ul>

Upvotes: 2

Related Questions