0

I'm trying to click on a list element and display an input box allowing the user to edit the content of that list element. I'm able to display the input box but when I click the Enter key on the keyboard, nothing is submitted. What am I doing wrong? 

$(document).ready(function(){

     // Trying to figure out how to edit individual items..

  $('li').click(function() {
    $(this).replaceWith('<form class="edit-form"><input class="edit-input" type="text" placeholder="edit.." autofocus></input></form>');  
  });

    $('.edit-form').submit(function(){
      console.log('hello') // Nothing logs in the console
    })
  });

Here's the html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h2>Cruddy App</h2>
    <hr>
    <form class='form'>
      <input id="input" type="text" placeholder="Type here.." autofocus>
    </form>
    <h3>Notes</h3>
    <ul></ul>
    <button id='clear'>Clear All</button>
  </div>
  <script src="app.js"></script>
</body>

</html>

This is the entirety of my js file if it helps..

const app = {};

app.counter = function() {
    var i = -1;
    return function() {
        i += 1;
        return i;
    };
}();

app.create = function(element) {
    return document.createElement(element);
};

app.select = function(element) {
    return document.querySelector(element);
};

app.makeList = function(text) {
    var i = app.counter();

    var li = app.create('li');
    var span = app.create('span');
    var edit = app.create('a');
    var del = app.create('a');

    var input = app.create('input');
    input.className = 'hidden';
    input.style.display = 'none';

    li.textContent = text
    //edit.textContent = ' Edit';
    edit.href = '#';
    del.textContent = ' Delete';
    del.href = '#';

    span.appendChild(edit);
    span.appendChild(del);
    li.appendChild(span);
    li.appendChild(input)
    ul.insertBefore(li, ul.childNodes[0]);

    li.id = 'item' + i;
    del.id = 'delete' + i;
    edit.id = 'edit' + i;
    edit.className = 'edit-link';
    del.className = 'delete-link';

    localStorage.notes = JSON.stringify(notes);
};

const ul = app.select('ul');
const input = app.select('input');
var notes;

$(document).ready(function() {
    if (localStorage.getItem('notes')) {
        notes = JSON.parse(localStorage.getItem('notes'));
    } else {
        notes = [];
    }

    localStorage.setItem('notes', JSON.stringify(notes));
    JSON.parse(localStorage.getItem('notes')).forEach(function(item) {
        app.makeList(item);
    });

    $('.form').submit(function(e) {
        e.preventDefault();
        if (input.value.length > 0) {
            notes.push(input.value);
            localStorage.setItem('notes', JSON.stringify(notes));
            app.makeList(input.value);
            input.value = '';
        }
    });

    $('#clear').click(function() {
        if(JSON.parse(localStorage.notes).length > 0){
            if (window.confirm('This will clear all items.\nAre you sure you want to do this?')) {
                localStorage.clear();
                while (ul.firstChild) {
                    ul.removeChild(ul.firstChild);
                }
            }
        }
    });

    $('ul').click('li', function(e) {
        if (e.target.id.includes('edit')) {
            console.log(' item ' + e.target.id.split('edit')[1] + ' needs to be edited.');
        }
        if (e.target.id.includes('delete')) {
            e.target.parentNode.parentNode.remove();
            localStorage.notes = JSON.stringify(notes);
            var t = e.target.parentNode.parentNode;
            var array = t.textContent.split(' ');
            var str = array.slice(0, array.length - 2).join(' ');
            var index = notes.indexOf(str);
            notes.splice(index, 1);
            localStorage.notes = JSON.stringify(notes);
        }
    });

     $('li').click(function() {
            $(this).replaceWith('<form class="edit-form"><input class="edit-input" type="text" placeholder="edit.." autofocus></input></form>');  
        });

        $('.edit-form').submit(function(){
            console.log('hello') // Nothing logs in the console
        })

});
I0_ol
  • 1,054
  • 1
  • 14
  • 28

1 Answers1

2

This is because your form does not exist when you are binding the event handler. What you can do instead is either place the binding into the function where you create the element like so

 $('li').click(function() {
    $(this).replaceWith('<form class="edit-form"><input class="edit-input" type="text" placeholder="edit.." autofocus></input></form>');  
    $('.edit-form').submit(function(event){
      console.log('hello') 
      event.preventDefault();
    })
 });

Or you can listen to events on the document and filter by selector, like so

$(document).on('submit','.edit-form',function(event){
  console.log('hello') 
  event.preventDefault();
})
Jakub Judas
  • 737
  • 6
  • 16
  • 1
    Is nothing new related to jQuery v2 – charlietfl Nov 02 '18 at 21:13
  • My bad. I just remember that we had to change this approach when we got rid of jQuery 1, but thinking about it that was because we probably used .live() before. I'll edit the answer. – Jakub Judas Nov 02 '18 at 21:18
  • `on()` has been around for many years since about jQuery 1.6 or 1.7 – charlietfl Nov 02 '18 at 21:19
  • Yes. What I originally remembered was caused by the fact that .live() was dropped (in 1.9 already actually). Before that, .live() would have solved this question. Anyways, the answer has been edited. Thanks for the correction. – Jakub Judas Nov 02 '18 at 21:25
  • Right but that was many years ago. v1.7 came out in 2011 – charlietfl Nov 02 '18 at 21:26
  • 1.9 came out in in 2013 according to Wikipedia (until then it was deprecated but available). Time flies. That's why my memory of it is so foggy :) – Jakub Judas Nov 02 '18 at 21:29