0
我正在使用jQuery动态地将列表元素添加到无序列表中。该元素包含缩略图照片和文本区域。JQUERY - 当事件侦听器被触发时,textarea不会返回.val()的动态添加列表元素
由于在列表中可能有多个这些元素,每个元素都被分配一个唯一的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.
}
是否有类型? '笔记?应该是笔记 – ScanQR
你在console.log中有一个错字('notes); (请注意额外的引用),如果你有正确的ID,你的代码应该可以工作。 –
@ TechBreak @ Zakaria很抱歉报价。将代码复制到此处时,这是我的错误复制粘贴编辑。在我的代码中没有引号的问题,它不会从textarea返回值。我在这里更正了事件监听器代码示例,以正确反映我在代码中运行的内容。 –