Я использую jQuery для динамического добавления элемента списка в и неупорядоченный список. Элемент содержит фотографию миниатюр и текстовое поле.JQUERY - динамически добавленный элемент списка с textarea, не возвращающий .val(), когда запускается прослушиватель событий
Поскольку в списке может быть несколько таких элементов, каждому элементу присваивается уникальный идентификатор, как и каждый текстовой области.
Независимо от того, что я пытаюсь, я не могу получить исходное содержимое или изменить содержимое текстового поля для возврата.
Структура страницы выглядит следующим образом:
<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.
}
есть тип? 'заметки? должны быть примечания – ScanQR
У вас есть опечатка в console.log ('notes); (обратите внимание на дополнительную цитату), ваш код должен работать, если у вас есть правильный идентификатор. –
@ TechBreak @ Закария сожалеет о цитате. Это была неправильная копия пасты редактирования с моей стороны при копировании кода здесь. В моем коде нет проблемы с кавычками, и он не возвращает значение из текстового поля. Я скорректировал пример кода прослушивателя событий, чтобы правильно отразить то, что у меня работает в моем коде. –