您好，我正在尝试使用 Jquery 将字段中输入的文本添加到列表的末尾。这是我的 HTML。
$(function() {
var $newitem = $('#newItemButton');
var $text = $('#itemDescription');
$newitem.show();
$('#newItemForm').hide();
$('#showForm').on('click', function(){
$newitem.hide();
$('#newItemForm').show();
});
$('#addButton').on('submit', function(e){
e.preventDefault();
var text = $text.val();
console.log(text); //Why is this not working
$('li:last').after('<li>'+ text +'</li>');
$newItemForm.hide();
$newitem.show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript </title>
<link rel="stylesheet" href="css/c07.css" />
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="show.js"></script>
</body>
</html>虽然其他事情正在工作，但用户输入没有添加到 li 的末尾。我尝试控制台记录用户输入值，但没有显示任何内容。有人可以告诉我我做错了什么吗？
有人可以让我知道他们如何有效地调试 Jquery 吗？我尝试在 chrome 检查器中进行跟踪，但与使用 vanilla JS 时不同，它会转到 Jquery 文件，并且在运行如此多的 Jquery 代码的情况下跟踪程序执行和变量分配似乎是最不可能的。
最佳答案
尝试使用
$(function() {
var $newitem = $('#newItemButton');
var $text = $('#itemDescription');
$newitem.show();
$('#newItemForm').hide();
$('#showForm').on('click', function(){
$newitem.hide();
$('#newItemForm').show();
});
$('#addButton').on('click', function(e){
e.preventDefault();
var text = $text.val();
console.log(text);
$('li:last').after('<li>'+ text +'</li>');
$newItemForm.hide();
$newitem.show();
});
});
您应该使用点击，而不是提交。
如何调试 JavaScript/jQuery
你的console.log方法还不错。既然您已经注意到它没有被执行，您应该问自己，为什么它没有被执行。在本例中，这是错误的监听器标记(submit 而不是 click)。
正如您所提到的，另一种方法是使用 Chrome 调试器。您可以通过单击行号来设置断点。这样您就可以跳过所有不相关的代码。
此外，您可能还应该始终使用“Step over”(或 F10)在 Debug模式下继续，以免不必要地看到 jQuery 代码。
关于javascript - 无法向 li 添加文本输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49315769/