JQuery Function Only打印未定義

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存在。