Javascript 无法将文本输入添加到li

您好，我正在尝试使用Jquery将字段中输入的文本添加到列表的末尾。这是我的HTML

$function{ var$newitem=$'newItemButton'； var$text=$'itemsdescription'； $newitem.show； $'newItemForm'。隐藏； $'showForm'。单击，函数{ $newitem.hide； $'newItemForm'。显示； }; $'addButton'。在'submit'上，函数E{ e、 防止违约； var text=$text.val； console.logtext；//为什么不起作用 $'li:last'。在+text+之后； $newItemForm.hide； $newitem.show； }; }; JavaScript 列表 买杂货 新鲜无花果 松子 蜂蜜 香醋 新项目 $function{ var$newitem=$'newItemButton'； var$text=$'itemsdescription'； $newitem.show； $'newItemForm'。隐藏； $'showForm'。单击，函数{ $newitem.hide； $'newItemForm'。显示； }; $'addButton'。单击，函数E{ e、 防止违约； var text=$text.val； $'ul'。追加+文本+； $'newItemForm'。隐藏； $newitem.show； $text.val； }; }; JavaScript 列表 买杂货 新鲜无花果 松子 蜂蜜 香醋 新项目 试用

$(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在调试模式下前进，以避免不必要地看到jQuery代码

---

下面是一个更新的javascript，它可以工作：

$(function() {
    var $newitem = $('#newItemButton');
    var $text = $('#itemDescription');

    $newitem.show();
    $('#newItemForm').hide();
    $('#showForm').on('click', function(){
        $newitem.hide();
        $('#newItemForm').show();
    });  
    $('#newItemForm').on('submit', function(e){
        e.preventDefault();
        var text = $('#itemDescription').val();
        console.log(text);   //Why is this not working 
        $('li:last').after('<li>'+ text +'</li>');
        $('#newItemForm').hide();
        $newitem.show();
    });
});

更多解释

提交事件必须绑定到表单元素上。请参阅JQuery文档：

在代码中，您误用了$函数。它应该使用选择器作为参数。基本上，您可以使用元素的id。

e.preventDefault将阻止当前行为。看看你的代码

 $('#addButton').on('submit', function(e) {
      e.preventDefault();

您添加了preventDefault，这意味着您没有阻止表单的提交。此代码应更改为

$('#newItemForm').on('submit', function(e) {
      e.preventDefault();

现在，每当表单试图提交时，您都在阻止它。这应该像你期望的那样工作。请看下面的代码片段

$function{ var$newitem=$'newItemButton'； var$text=$'itemsdescription'； $newitem.show； $'newItemForm'。隐藏； $'showForm'。单击，函数{ $newitem.hide； $'newItemForm'。显示； }; $'newItemForm'。在'submit'上，函数E{ e、 防止违约； var text=$text.val； console.logtext；//为什么不起作用 $'li:last'。在+text+之后； $'newItemForm'。隐藏； $newitem.show； }; }; 列表 买杂货 新鲜无花果 松子 蜂蜜 香醋 新项目

---

我正在学习的那本书说$function{}是$document.readyfunction{}的缩写。这种做法不好吗？如果是，为什么？@现在我很抱歉，我的错。看来你是对的。