JQUERY - 當事件偵聽器被觸發時，textarea不會返回.val（）的動態添加列表元素

Question

我正在使用jQuery動態地將列表元素添加到無序列表中。該元素包含縮略圖照片和文本區域。

由於在列表中可能有多個這些元素，每個元素都被分配一個唯一的ID，就像每個textarea一樣。

無論我嘗試什麼，我都無法獲取原始內容或更改要返回的textarea的內容。

頁的結構如下：

<script id='SELECT' type='x-tmpl-mustache'> 
    <div data-role='page' id='{{inspectionId}}-{{question.questionId}}' data-theme='c' class='{{questionClass}}' data-job='{{jobId}}' data-inspection='{{inspectionId}}' data-question='{{question.questionId}}' data-prev='{{inspectionId}}-{{question.previousQuestion}}' data-next='{{inspectionId}}-{{question.nextQuestion}}'> 
     <div data-role='header' data-add-back-btn='false' data-position='fixed' data-theme='d'> 
      <a href='#{{questionBackHREF}}' class='ui-btn ui-icon-arrow-l ui-btn-icon-left'>{{inspectionId}}</a> 
       <h1>{{question.questionId}}</h1> 
       <span class='ui-li-count'>{{question.livePage}}</span> 
     </div><!-- /header--> 
     <div data-role='main' class='ui-content'> 
      <form action='' id='form{{inspectionId}}-{{question.questionId}}'> 
      <ul data-role='listview' id='ul{{inspectionId}}-{{question.questionId}}' class='ui-listview' data-theme='d' data-inset='false'> 
       <li data-role='list-divider' data-theme='d'> 
        Section: {{section.title}} 
       </li> 
       <li data-role='list-divider' data-theme='d'> 
        {{question.label}} 
       </li> 
       <li data-role='list-divider' class='ui-field-contain' data-theme='c'> 
        <select name='select-choice-0' id='select-choice-0' name='answer' class='mySelection' data-theme='c'> 
         <option data-placeholder='false'>{{question.answer}}</option> 
         {{#question.values}} 
          <option value='{{.}}'>{{.}}</option> 
         {{/question.values}} 
        </select> 
       </li> 
       <li data-role='list-divider' class='ui-field-contain' data-theme='c'> 
        <label for='notes'>Notes:</label> 
        <textarea id='notes' name='notes' class='notes' placeholder='Enter any notes here.'>{{question.notes}}</textarea> 
       </li> 
       <li data-role='list-divider' class='ui-field-contain' data-theme='d'> 
        Question Photographs 
       </li> 


       ***<li class='ui-field-contain listImage' id='{{imageId}}' image='{{image}}' data-job='{{thisJob}}' data-question='{{question}}' data-theme='d' data-icon='delete'> 
        <a href='#'> 
        <img src='{{image}}' class='img'></img> 
        <textarea type='text' id='imageNotes{{imageId}}' name='imageNotes' class='imageNotes{{imageId}}' placeholder='Notes.' data-theme='d'>{{notes}}</textarea> 
        </a> 
       </li><!-- /list-item -->*** 


       <li data-role='list-divider' id='bottom-divider{{inspectionId}}-{{question.questionId}}' class='ui-field-contain' data-theme='d'> 
       </li> 
      </ul> 
      </form> 
     </div><!-- /content--> 
     <div data-role='footer' id='footer' data-position='fixed' data-id='quesfooter' data-theme='d'> 
      <div data-role='navbar' data-theme='d'> 
       <ul> 
        <li data-theme='d'><a href='#jobs' data-icon='home'></a></li> 
        <li data-theme='d'><a href='#' onclick='takePicture();' id='cameraButton' data-icon='camera'></a></li> 
        <li><a href='#{{question.questionId}}-new-alert' data-icon='plus' data-theme='d'>New Alert</a></li> 
       </ul> 
      </div> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
</script> 

事件監聽器如下：

$(document).on('click', '.listImage', function(event) { 
    var id = $(this).attr('id'); 
    var job = $(this).data('job'); 
    var question = $(this).data('question'); 
    var notes = $(this).find("#imageNotes"+id).val(); 
    console.log(id); //returns the id correctly. 
    console.log(job); //returns the data correctly. 
    console.log(question); //returns the data correctly. 
    console.log(notes); //returns undefined. 
} 

Answer 1

我建議做以下，

var notesEl = "#imageNotes"+id; 

並嘗試找到如下，

$(this).find(notesEl).val();