JQuery 函数只打印出未定义答案

【问题标题】：JQuery Function Only Printing out UndefinedJQuery 函数只打印出未定义
【发布时间】：2015-12-28 17:33:21
【问题描述】：

我正在编写一个函数，旨在将网页上文本字段的内容附加到列表中，以便我的 HTML 的另一部分可以在文本字段上方呈现列表内容。字段和按钮出现并且是响应式的，但唯一打印出来的是“未定义”而不是文本字段的内容。这是javascript函数：

<sp:script>


$('#append').on('click', function () {
   var text = $('#new-text').val();
   var li = '<li>' + text + '</li>';
   $('#target-list').append(li);
});

</sp:script>

这是渲染文本、文本字段和按钮的代码：

    <!-- adding text -->
        <div class="tab-content"> <!-- begin div -->
                <div class="clearfix">
                    <div class="form-group col-sm-4">

                    <ul id ="target-list"> <!-- begin rendering existing text -->
                        <g:each var="newText" in="${instance.newTexts}">
                            <li class ="list-item">
                                ${newText} 
                            <input type="hidden" name="newText" value=${newText}"/>
                            </li>
                        </g:each>
                    </ul> <!-- end rendering existing text -->
                    <!-- enter text field start -->
                        <input class="form-control required" type="text" id="new-email" placeholder="Enter additional email addresses"/>


                        <!-- enter text field end -->
                    </div>
                    <br>
                    <!-- begin code for add button -->  
                    <button type="button" class="btn btn-sm btn-green" title="Add mew text"
                        id = "append">

                        <i class="fa fa-plus"></i>
                    </button> <!--  end button div -->
                </div>
                               
            </div>

我有什么遗漏吗？

【问题讨论】：

标签： javascript jquery html list append

【解决方案1】：

您指的是不存在的 ID 'new-text'。检查您的 HTML 并确保您在 jQuery 中调用的 ID 存在。

【讨论】：

【解决方案2】：

您的 ID 不是new-text，而是new-email

$('#append').on('click', function () {
   var text = $('#new-email').val();
   var li = '<li>' + text + '</li>';
   $('#target-list').append(li);
});

【讨论】：

【解决方案3】：

您的输入没有 id '#new-text'。这将导致 $('#new-text').val() 未定义。尝试添加 ID。

<input id="new-text" type="hidden" name="newText" value=${newText}"/>

【讨论】：