從文本框輸入並添加到列表不起作用

我想從使用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(' '); 
    }); 
});

來源

2016-09-20 Asifuzzaman Redoy

您需要防止提交的默認行爲，通過返回'FALSE'或調用'e.preventDefault（）;' – jcubic

變量$爲textInput = $（ '項目：文本框'）;看起來不對。「輸入：文本框」會比以後在代碼中更加正確。我假設你以後在你的代碼中必須這樣做，因爲初始選擇器是錯誤的，所以你不能使用$ textInput來獲取val（）; – klikas

檢查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

要解決此問題，我已將選擇器更改爲輸入字段的ID。現在它工作得很好。

來源

2016-09-20 09:11:58

謝謝它工作正常。。。 –

我知道這有一個可接受的答案 - 我沒有完全讀你的問題，所以這可能不會完全按照你想要的 - 但我想提出一個代碼少的替代方法。以下特點是一個按鈕，當你點擊它時 - 從文本框中獲取值並將其附加到列表中（注意，我給列表一個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>

來源

2016-09-20 09:35:00 gavgrif

從文本框輸入並添加到列表不起作用

回答

相關問題