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

【问题标题】：Attach events to child controls in JQueryUI dialog在 JQueryUI 对话框中将事件附加到子控件
【发布时间】：2014-01-27 21:25:49
【问题描述】：

我对 JQuery 比较陌生，我在 JavaScript 方面的经验只不过是 UI 粘在 HTML 表单上，而不是深入编程（即用于客户端验证的有限 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();
            }
        }
    });
}

【问题讨论】：

在您分享的代码中，您在哪里得到了错误的值？
在 switch 语句中，无论我选择什么值，$('#QITopic').val() 总是返回 'none'。在使用 JQueryUI Dialog 之前，这返回了正确的值。我的猜测是 JavaScript 函数正在查看页面上 DIV 中的控件，而不是为对话框创建的新 HTML 文档 JQueryUI。
你为什么打电话给$('#QIDetail').clone();？这将导致您的 DOM 中出现重复的 ID。它还将从包含的元素中删除事件。
我从这个项目的另一个对话框中复制了代码。由于它在其他情况下有效，我只是假设这是做我想做的事情的正确方法。

标签： javascript jquery jquery-ui

【解决方案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 返回到“预初始化”状态。

【讨论】：