如何从动态和非动态创建的控件中打开相同的jQuery对话框

Question

我需要从不同的输入文本控件（包括那些动态创建的控件）打开相同的jQuery对话框 这是我的页面第一次加载时显示的内容。 当用户按下“添加”按钮时，会向表中添加一个新行

到目前为止一切顺利。当我必须打开允许用户在输入中输入文本的对话框时会出现问题（单击对话框时会显示对话框） 起初，我认为只需要在所有控件中添加一个类，然后使用类选择器调用对话框。 不幸的是，我了解到，使用动态控件时，您必须使用“.on”来附加事件。 一旦克服了这些困难，我又碰到了一个我还没能解决的问题。这是因为如果您不希望在初始化时自动打开对话框，则必须将“autoOpen”设置为false。我这样做了，但我得到的唯一结果是没有输入工作。 我还尝试将关于对话框的所有代码放入函数中，然后在单击输入时调用该函数 我也尝试声明一个变量并将该变量设置到对话框中，如下所示：

var dialog= $( "#dialog" )

但它也没有用 我已经尝试了一些可能的解决方案，但到目前为止还没有运气。

编辑：这是一个小提琴，所以你可以更好地了解我在说什么：

http://jsfiddle.net/3BXJp/

全屏结果： http://jsfiddle.net/3BXJp/embedded/result/

这是aspx页面的默认代码（Default.aspx）：

 <form id="form1" runat="server">
    <div>
        <fieldset>
            <legend>Expression Builder</legend>
            <table id="myTable" class="order-list">
                <thead>
                    <tr>
                        <td colspan="2">
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: right;">
                            IF(<input type="text" name="condition1" class="showDialog" />
                            :
                        </td>
                        <td>
                            <input type="text" name="trueValue" class="showDialog" />
                            )
                        </td>
                        <td>
                            <a class="deleteRow"></a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" style="text-align: left;">
                            <input type="button" id="addrow" value="+ Add" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="">
                            ELSE (
                            <input type="text" name="else" id="else" class="showDialog" />)
                        </td>
                    </tr>
                </tfoot>
            </table>
        </fieldset>
        <br />
        <input type="button" id="btnEnviar" value="Send" />
    </div>
    <div id="dialog-form" title="Add New Detail">
        <p>
            All the fields are required.</p>
        <table>
            <tr>
                <td>
                    <label for="condition" id="lblcondition">
                        Condition</label>
                </td>
                <td>
                    <input type="text" name="condition" id="condition" class="text ui-widget-content ui-corner-all" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="returnValue" id="lblreturnValue">
                        Return Value</label>
                </td>
                <td>
                    <input type="text" name="returnValue" id="returnValue" class="text ui-widget-content ui-corner-all" />
                </td>
            </tr>
        </table>
    </div>
    </form>

这里是javascript代码：

<script type="text/javascript">
    $(document).ready(function () {
        var counter = 0;
        $("button, input:submit, input:button").button();
        $('input:text').addClass("ui-widget ui-state-default ui-corner-all");
        var NewDialog = $("#dialog-form");
        NewDialog.dialog({ autoOpen: false });
        var Ventana = $("#dialog-form");
        $("#addrow").on("click", function () {

            var counter = $('#myTable tr').length - 2;

            $("#ibtnDel").on("click", function () {
                counter = -1
            });

            var newRow = $("<tr>");
            var cols = "";

            cols += '<td>ELSE IF(<input type="text" name="condition' + counter + '" class="showDialog1" /> </td>';
            cols += '<td>: <input type="text" name="TrueValue' + counter + '" class="showDialog1" />)</td>';

            cols += '<td><input type="button" id="ibtnDel"  value="-Remove"></td>';
            newRow.append(cols);
            var txtCondi = newRow.find('input[name^="condition"]');
            var txtVarlorV = newRow.find('input[name^="TrueValue"]');
            newRow.find('input[class ="showDialog1"]').on("click", function () {

                //Seleccionar la fila
                $(this).closest("tr").siblings().removeClass("selectedRow");
                $(this).parents("tr").toggleClass("selectedRow", this.clicked);

                Ventana.dialog({
                    autoOpen: true,
                    modal: true,
                    height: 400,
                    width: 400,
                    title: "Builder",
                    buttons: {
                        "Add": function () {
                            txtCondi.val($("#condition").val());
                            txtVarlorV.val($("#returnValue").val());
                            $("#condition").val("");
                            $("#returnValue").val("");
                            $(this).dialog("destroy");
                        },
                        Cancel: function () {
                            //dialogFormValidator.resetForm();
                            $(this).dialog("destroy")
                        }

                    },

                    close: function () {
                        $("#condition").val("");
                        $("#returnValue").val("");
                        $(this).dialog("destroy")
                    }
                });
                return false;

            });

            $("table.order-list").append(newRow);
            counter++;
            $("button, input:submit, input:button").button();
            $('input:text').addClass("ui-widget ui-state-default ui-corner-all");


        });


        $("table.order-list").on("click", "#ibtnDel", function (event) {
            $(this).closest("tr").remove();
        });
        $("#btnEnviar").click(function () {

            //Armo el objeto que servira de parametro, para ello utilizo una libreria JSON
            //Este parametro mapeara con el definido en el WebService
            var params = new Object();
            params.Expresiones = armaObjeto();
            $.ajax({
                type: "POST",
                url: "Default.aspx/Mostrar",
                data: JSON.stringify(params),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data, textStatus) {
                    if (textStatus == "success") {
                        loadMenuVar(data);
                    }
                },
                error: function (request, status, error) {
                    alert(jQuery.parseJSON(request.responseText).Message);
                }

            });

        });

        $(".showDialog").click(function () {

            Ventana.dialog({
                autoOpen: true,
                modal: true,
                height: 400,
                width: 400,
                title: "Constructor",
                buttons: [
                    { text: "Submit", click: function () { doSomething() } },
                    { text: "Cancel", click: function () { $(this).dialog("destroy") } }
                          ],

                close: function () {
                    $(this).dialog("option", "autoOpen", false);
                    $(this).dialog("destroy")

                }
            });
            return false;
        });            

    });

这是我能够找到最接近解决方案的，但是仍然无法让对话框保持隐藏状态，直到点击输入

非常感谢任何建议或指导。 附：抱歉我的英文不好

Answer 1

我怀疑是因为您在对话框中使用destroy()而不是close()。目前看起来你每次都在创建和销毁对话框，不要这样做。您应该创建一次对话框，将对话框功能隔离到单独的函数，然后在其上使用open()和close()（您需要做一些额外的工作才能将值放到右侧字段）。

如果您将对话框设置为隐藏它将停止发生，您可以使当前代码正常工作，将其添加到您的HTML中（在<HEAD>中）：

<style>
#dialog-form {
    display: none;
}
</style>

你可能应该有一个单独的样式表文件，其中包含该样式。类似地，如果尚未将所有JS放在单独的文件中。

但是我肯定会考虑重写整个事情以遵循上面的指导原则，看起来它可以变得更简单，这使得将来更容易支持。

修改

这是一个简化版本，展示了我将如何做到这一点。

脚本：

var counter = 1; // Counter for number of rows
var currentRow = null; // Current row selected when dialog is active

// Create the dialog
$("#dialog-form").dialog({
    autoOpen: false,
    dialogClass: "no-close", // Hide the 'x' to force the user to use the buttons
    height: 400,
    width: 400,
    title: "Builder",
    buttons: {
        "OK": function(e) {
            var currentElem = $("#"+currentRow); // Get the current element
            currentElem.val($("#d_input").val()); // Copy dialog value to currentRow
            $("#d_input").val(""); // Clear old value
            $("#dialog-form").dialog('close');
        },
        "Cancel": function(e) {
            $("#d_input").val(""); // Clear old value
            $("#dialog-form").dialog('close');
        }
    }
});

// This function adds the dialog functionality to an element
function addDialog(elemId) {
    elem = $("#"+elemId);
    elem.on('click', function() {
        currentRow = $(this).attr('id');
        $("#dialog-form").dialog('open');
    });

}

// Add functionality to the 'add' button
$("#addRow").on('click', function () {
    counter = counter + 1;
    var newId = "in"+counter;
    var newRow = "<tr><td><input id='"+newId+"' class='showDialog'></td></tr>";
    $('TBODY').append(newRow);
    // add the dialog to the new element
    addDialog(newId);
});

// add the dialog to the first row
addDialog("in1");

HTML：

<div>
    <fieldset>
        <legend>Expression Builder</legend>
        <table id="myTable" class="order-list">
            <tbody><tr>
                <td><input id='in1' class='showDialog'></td>
               </tr>
            </tbody>
         </table>
            <input type='button' id='addRow' value='add'></input>                
    </fieldset>
    <br />
    <input type="button" id="btnEnviar" value="Send" />
</div>
<div id="dialog-form" title="Add New Detail">
  <input type="text" id="d_input" />
</div>

Fiddle

这将不同的功能隔离到不同的功能中。您可以轻松扩展它以执行您想要的操作。如果你想要删除功能，我会考虑为每一行提供一个删除按钮，其中一个给定的类具有一个删除该行（和按钮）的触发器功能。然后有一个单独的活动行计数。在开始时使用disable()来禁用单个按钮，当您添加该行的所有按钮enable()行时。删除行时，禁用按钮是existingRows＆lt; = 1.