使用 jQuery .append 应该使用输入字段中的值添加新 li，但它只添加空 li

Question

我想获取输入字段中写入的项目，并在点击按钮后将其添加到下面的列表中。 我这样做的方式是错误的，因为该事件只附加空 li

HTML：

<input type="text" id="newItem">
<button id="button-grocery-list">Add to the grocery list</button>
<ul id="groceryList">
    <li>Milk</li>
    <li>Apples</li>
    <li>Pasta</li>
    <li>Avocado</li>
    <li>Chocolate</li>
</ul>

jQuery：

let currentItem = $('#newItem').val();
$('#button-grocery-list').click(function(){
    $('#groceryList').append(`<li>${currentItem}</li>`)
});

我试图直接附加 #newItem 的值，如下所示：

$('#groceryList')append(`<li>$('#grocery-list-item-to-add').val()</li>`)

但是没有用，所以我想通过将它分配给变量newItem来获取值，但是新的li是空的。

为什么我的代码不起作用？

Answer 1

您的代码let currentItem = $('#newItem').val(); 不起作用，因为它在 button click event之外。 所以执行let currentItem = $('#newItem').val(); 只有在按钮被clicked 。 我想建议在使用click事件时bind和unbind事件。 并检查input的值是否为undefined或null或empty 。

 $('#button-grocery-list').off('click').on('click', function() { let val = $('#newItem').val(); if (val !== undefined && val !== '') { $('#groceryList').append(`<li>${val}</li>`); //$('#newItem').val(''); // Use this line if you want to append the data and clear input box. } else { //display message or action if input value is blank } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="newItem"> <button id="button-grocery-list">Add to the grocery list</button> <ul id="groceryList"> <li>Milk</li> <li>Apples</li> <li>Pasta</li> <li>Avocado</li> <li>Chocolate</li> </ul>

Answer 2

 $('#button-grocery-list').click(function(){ $('#groceryList').append('<li>' +$('#newItem').val() + '</li>'); $('#newItem').val(""); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="newItem"> <button id="button-grocery-list">Add to the grocery list</button> <ul id="groceryList"> <li>Milk</li> <li>Apples</li> <li>Pasta</li> <li>Avocado</li> <li>Chocolate</li> </ul>

您的 jQuery 代码中的语法有误。 参考上面的小提琴。 您需要做的只是使用“id”选择器获取文本框的值并将其附加到您的列表中。 请注意，我还没有应用验证。

Answer 3

您需要在click回调中移动currentItem变量

//let currentItem = $('#newItem').val();  //Comment here.
$('#button-grocery-list').click(function(){
    let currentItem = $('#newItem').val(); //Define it inside the callback method.
    $('#groceryList').append(`<li>${currentItem}</li>`)
});