Question

我正在编写一个函数，用于将网页上文本字段的内容附加到列表中，这样我的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>

我有什么遗失的吗？

Answer 1

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

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

Answer 2

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

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

Answer 3

您指的是不存在的ID“新文本”。检查你的HTML并确保你在jQuery中调用的ID存在。

JQuery函数只打印未定义

3 个答案: