Question

我对JQuery相对较新，我对JavaScript的体验并不仅仅是HTML表单的UI粘合，而不是深入编程（即用于客户端验证的有限DOM客户端事件以及使UI更具响应性并且很有用。）

我的任务是扩展现有的应用程序以添加质量改进模块。该应用程序广泛使用JQueryUI。我需要显示一个包含一个包含四个控件的表的对话框，我需要让JavaScript对JavaScript中控件的事件做出反应。

例如，我需要根据另一个SELECT框的值的选定值更改一个SELECT框的内容。

我在一个html文档中编写了JQuery和JavaScript，它工作正常，但是当我将控件放在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();
            }
        }
    });
}

Answer 1

请勿在ID上使用$.clone()。您拨打.clone的方式也不会复制任何附加事件。您可以使用destroy方法删除对话框。

var dlg = $('#QIDetail');
dlg.dialog({
    autoOpen: true,
    width: 650,
    modal: true,
    closeOnEscape: false,
    buttons: {
      Close : function() {
                $(this).dialog('close');
                $(this).dialog('destroy');
              }
    }
});

这会将DOM返回到“pre-init”状态。

在JQueryUI对话框中将事件附加到子控件

1 个答案: