使用jQuery将textarea内容追加到Bootstrap list-group的代码问题求助

我帮你排查出了代码里的几个问题，已经修正完成，下面是修复后的完整代码和问题说明：

修正后的完整代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="container">
    <ul class="list-group">
    </ul>
</div>
<div class="container" style="margin-top: 60px">
    <form class="well col-xs-6 col-xs-offset-3">
        <div class="form-group">
            <label id="commentTitle" for="comment">Comment:</label>
            <textarea class="form-control" rows="5" id="comment"></textarea>
        </div>
        <button class="btn btn-primary ">submit</button>
    </form>
</div>

<script>
$(document).ready(function() {
    $('.btn-primary').click(function(event) {
        // 阻止表单默认提交行为，避免页面刷新
        event.preventDefault();
        
        // 用id选择器精准获取textarea的值
        const comment = $('#comment').val();
        
        // 正确拼接字符串，将变量插入到HTML中
        $('.list-group').append(`<li class='list-group-item'>${comment}</li>`);
        
        // 可选：提交后清空textarea，提升体验
        $('#comment').val('');
    });
});
</script>

问题说明 #

我帮你梳理了原代码里的几个关键错误：

• 字符串拼接错误：原代码中"<li class='list-group-item'>+comment+</li>"的写法会把+comment+当成普通文本插入，而不是变量的值。我改用了ES6模板字符串（`${comment}`），也可以用传统拼接方式："<li class='list-group-item'>" + comment + "</li>"。

• 未阻止表单默认提交：点击按钮会触发表单的默认提交行为，导致页面刷新，刚添加的内容会消失。通过event.preventDefault()可以阻止这个行为。

• 重复引入jQuery：原页面同时加载了两个不同版本的jQuery（2.1.1和3.2.1 slim），这会导致冲突和不必要的资源加载，我保留了Bootstrap依赖的3.2.1版本。

• 选择器不够精准：原代码用$('textarea')和$('button:last')这类标签选择器，当页面有其他同类型元素时会出错。改用$('#comment')（id选择器）和$('.btn-primary')（类选择器）更可靠。

内容的提问来源于stack exchange，提问作者Webdev