Ввод из текстового поля и добавление в список не работает

Question

Я пытаюсь добавить новый элемент в список из текстового поля с помощью jQuery, но он не работает. Здесь много кода, я хочу найти проблему в своем коде.

HTML код

<div id="page"> 
<h1 id="header">LIST</h1> 
<h2>Add</h2> 

<ul> 

<li id="one" class="hot"><em> Fresh </em>Figs </li> 
<li id="two" class="hot"> Honey </li> 
    <li id="three" class="hot">Nuts </li> 
<li id="four" class="hot">Bread </li> 

</ul > 
</div> 
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>     
</div> 
    </br> 
<form id="newItemForm"> 

<input type="text" id="itemDescription" placeholder="Add a new item...."/> 
<input type="submit" id="addButton" value="Add"/> 

</form> 

И код JQuery

$(function(){ 

    var $newItemButton=$('#newItemButton'); 
    var $newItemForm=$('#newItemForm'); 
    var $textInput=$('item:textbox'); 

    $newItemButton.show(); 
    $newItemForm.hide(); 
    $('#showForm').on('click',function(){ 
     $newItemButton.hide(); 
     $newItemForm.show(); 
    }); 
    $newItemForm.on('submit',function(e){ 
     var $newText=$('input:textbox').val(); 
     $('li:last').after('<li>' + $newText + '</li>').val(); 
     $newItemForm.hide(); 
     $newItemButton.show(); 
     $textInput.val(' '); 
    }); 
}); 

Answer 1

проверка this fiddle.

у вас была небольшая ошибка в вашем jQuery. Вот рабочий код:

$(function(){ 

var $newItemButton=$('#newItemButton'); 
var $newItemForm=$('#newItemForm'); 
var $textInput=$('#itemDescription'); 

    $newItemButton.show(); 
    $newItemForm.hide(); 
    $('#showForm').on('click',function(){ 

    $newItemButton.hide(); 
    $newItemForm.show(); 
}); 

$newItemForm.on('submit',function(e){ 
    e.preventDefault(); 
    var $newText=$('#itemDescription').val(); 
    $('li:last').after('<li>' + $newText + '</li>').val(); 
    $newItemForm.hide(); 
    $newItemButton.show(); 
    $textInput.val(' '); 
}); 
}); 

Сначала вы должны предотвратить поведение по умолчанию из элемента формы при отправке. Для этого я добавил функцию e.preventDefault();. то я получил эту ошибку:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: textbox

Чтобы исправить это, я сменил селектор на идентификатор поля ввода. Теперь он отлично работает.

Answer 2

Я знаю, что это принятый ответ - и я не полностью читал ваш вопрос, чтобы это не могло делать именно то, что вы хотите - но я хотел представить альтернативный подход с меньшим количеством кода. Ниже приведена кнопка, которая при нажатии на нее принимает значение из текстового поля и добавляет его в список (обратите внимание, что я дал список ID). Просто у вас есть другой вариант. Вам совсем не нужна форма формы, и вам, разумеется, не нужно ее отправлять - просто чтобы получить значение и добавить его в список. Просто говорю.

$(document).ready(function(){ 
 
    $('#addButton').click(function(){ 
 
    var newItem = $('#itemDescription').val(); 
 
    $('#myList').append('<li class="hot">' + newItem + '</li>'); 
 
    $('#itemDescription').val(''); 
 
    }) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="page"> 
 
    <h1 id="header">LIST</h1> 
 
    <h2>Add</h2> 
 

 
    <ul id="myList"> 
 
    <li id="one" class="hot"><em> Fresh </em>Figs </li> 
 
    <li id="two" class="hot"> Honey </li> 
 
    <li id="three" class="hot">Nuts </li> 
 
    <li id="four" class="hot">Bread </li> 
 
    </ul > 
 
</div> 
 

 
<input type="text" id="itemDescription" placeholder="Add a new item...."/> 
 
<button type="button" id="addButton">Add</button>