Question

我试图单击列表元素并显示一个输入框，允许用户编辑该列表元素的内容。我可以显示输入框，但是当我单击键盘上的Enter键时，没有任何内容提交。我究竟做错了什么？

$(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
    })
  });

这是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>

如果有帮助，这是我的js文件的全部。

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
        })

});

Answer 1

这是因为绑定事件处理程序时表单不存在。相反，您可以做的是将绑定放入创建元素的函数中，

 $('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();
    })
 });

或者您可以听文档上的事件并按选择器进行过滤，就像这样

$(document).on('submit','.edit-form',function(event){
  console.log('hello') 
  event.preventDefault();
})

如何使用jQuery编辑列表元素

1 个答案: