Я относительно новичок в JQuery, и мой опыт работы с JavaScript не был чем-то большим, чем UI-клей для HTML-форм, чем углубленное программирование (т. Е. Ограниченные DOM-клиентские события для клиента боковая проверка и сделать пользовательский интерфейс более отзывчивым и полезным.)Присоединить события к дочерним элементам управления в диалоговом окне JQueryUI
Мне поручено расширить существующее приложение, чтобы добавить модуль улучшения качества. Это приложение широко использует JQueryUI. Мне нужно отобразить диалоговое окно, содержащее таблицу с четырьмя элементами управления, и мне нужно, чтобы JavaScript реагировал на события элемента управления в JavaScript.
Например, мне нужно, чтобы содержимое одного окна SELECT изменялось в зависимости от выбранного значения значения другого поля SELECT.
Я разработал JQuery и JavaScript в html-документе, и он работал нормально, но когда я поместил элементы управления в диалоговое окно JQueryUI (передав DIV, содержащий элементы управления), связь между событиями и элементами управления сломанный странным образом.
События срабатывают правильно, но когда функция ссылается на элементы управления, возвращаемые значения являются значениями исходной HTML-страницы, а не элементами управления в диалоговом окне.
Кажется, что JQueryUI создает новую HTML-страницу и витает над исходной HTML-страницей.
Я искал два дня для решения этой проблемы, но не нашел ответа.
Вот HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="editTest.js"></script>
</head>
<body>
<input type="button" id="showQISection"
value="Enter Quality Improvement Data"
onclick="showQISection_click(this);" />
<div id="QIDetail" style="display: none" title="Quality Improvement">
<table id="atable" style="border-collapse:collapse;border:1px solid black;">
<tr>
<th style="border-bottom:1px solid black;">Topic</th>
<th style="border-bottom:1px solid black;">Specfiction</th>
<th style="border-bottom:1px solid black;">Notes</th>
<th style="border-bottom:1px solid black;">Command</th>
</tr>
<tbody>
<tr>
<td style="border-top:1px solid black;">
<select id="QITopic" name="QITopic" onchange="QIoptionCheck(this)">
<option value="none">Choose</option>
<option value="one">Option One</option>
<option value="two">Option Two</option>
<option value="three">Option Three</option>
<option value="four">Option Four</option>
</select>
</td>
<td style="border-top:1px solid black;"><select id="QIDetails"></select></td>
<td style="border-top:1px solid black;"><textarea id="notes" rows="3" cols="25"></textarea>
<td style="border-top:1px solid black;"><button type="button" onclick="addRow()">Add</button></td>
</tr>
</tbody>
</table>
<button type="button" onclick="Finish()">Save</button>
</div>
</body>
</html>
Вот JavaScript и JQuery код:
$(document).ready(
function() {
$('#QIDetails').hide();
}
);
var rows=[];
function aRow(id,topic,spec,notes)
{
this.id=id;
this.topic=topic;
this.spec=spec;
this.notes=notes;
}
function removeRow(d){
$('#atable tr#'+ d).remove();
for (var idx =0;idx < rows.length;idx++){
if (rows[idx].id==d){
rows.splice(idx,1);
break;
}
}
}
function addRow(){
var c= new Date();
var d = c.getTime();
var topic=$('#QITopic option:selected').text();
var Spec=$('#QIDetails option:selected').text();
var notes=$('#notes').val();
rows.push(new aRow(d,topic,Spec,notes));
$('#atable').append('<tr id ="' + d + '"><td>'+ topic +
'</td><td>' + Spec +
'</td><td>' + notes +
'</td><td><button type="button" onclick="removeRow('+ d + ')">remove</button></td></tr>');
$('#QITopic option:selected').removeAttr("selected");
$('#QIDetails option:selected').removeAttr("selected");
$('#notes').val('');
$('#QIDetails option').remove();
$('#QIDetails').hide();
}
function QIoptionCheck(){
$('#QIDetails option').remove();
alert('qitopic-'+ $('#QITopic').val());
switch($('#QITopic').val()){
case "one":
$('#QIDetails').show();
$('#QIDetails').append('<option value="oneone">Detail One-One</option>');
$('#QIDetails').append('<option value="onetwo">Detail One-Two</option>');
$('#QIDetails').append('<option value="onethree">Detail One-Three</option>');
break;
case "two":
$('#QIDetails').show();
$('#QIDetails').append('<option value="twoone">Detail Two-One</option>');
$('#QIDetails').append('<option value="twotwo">Detail Two-Two</option>');
$('#QIDetails').append('<option value="twothree">Detail Two-Three</option>');
break;
case "three":
$('#QIDetails').hide();
break;
case "four":
$('#QIDetails').hide();
break;
}
}
function Finish(){
$('#results').empty();
for (var idx =0;idx < rows.length;idx++){
$('#results').append('Topic-' + rows[idx].topic + ' ' +
'Spec- ' + rows[idx].spec + ' ' +
'Notes- ' + rows[idx].notes + '<br/>');
}
}
function showQISection_click(obj){
var dlg = $('#QIDetail').clone();
dlg.dialog({
autoOpen: true,
width: 650,
modal: true,
closeOnEscape: false,
buttons: {
Close : function() {
$(this).dialog('close').remove();
}
}
});
}
Где в коде, который вы поделили, вы получаете неправильное значение? –
в инструкции switch, независимо от того, какое значение я выбираю, $ ('# QITopic'). Val() всегда возвращает 'none'. Перед использованием JQueryUI Dialog это вернуло правильное значение. Я предполагаю, что функция JavaScript смотрит на элементы управления в DIV на странице, вместо этого создается новый HTML-документ JQueryUI, созданный для диалогового окна. –
Почему вы вызываете '$ ('# QIDetail'). Clone();'? Это приведет к дублированию идентификатора в вашей DOM. Он также будет блокировать события из содержащихся элементов. –