对话框中的 JQueryUI 提交按钮仅在第二次打开对话框后才有效

Question

双击可拖动元素时会打开一个对话框。它的目的是在图像下面附加一个 IP 地址：

它工作正常，但只有在我关闭对话框并再次打开它然后单击“提交”按钮之后。

这是我的代码：

HTML

<div id="configbox" title="IPv6 Configuration" style="font-size:15px;">
    <form>
        <b>DHCP</b> <input type="radio" name="option" value="DHCP"/> &nbsp;

        <b>Auto Config</b>  <input type="radio" name="option" value="auto"/> &nbsp;

        <b>Static</b>  <input type="radio" name="option" value="static"/> &nbsp; <br/><br/>
        <table>
            <tr>
                <td>
                    <b>IPv6 Address:</b>
                </td>
                <td>
                    <input type="text" id="address" size="25"/> &nbsp; / &nbsp; <input type="text" id="subnet" size="3"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Link Local Address:</b>
                </td>
                <td>
                    <input type="text" id="local" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>IPv6 Gateway:</b>
                </td>
                <td>
                    <input type="text" id="gateway" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>IPv6 DNS Server:</b>
                </td>
                <td>
                    <input type="text" id="dns" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </form>

    <center>
        <button id="submit"
                style="background-color:#B4BA22; border-radius:3px; font-size:17px; font-weight:bold; cursor:pointer;">Submit
        </button> &nbsp;
        <button id="cancel"
                style="border-radius:3px; font-size:17px; font-weight:bold; cursor:pointer;"> Cancel
        </button>
    </center>


</div>

JQuery

$(document).click(function (e) {
    // matches all children of droppable, change selector as needed

    currentDragImg = $(e.target).closest(".drag");



    if ($(e.target).closest(".drag").length > 0) {

        $(e.target).closest(".drag").find(".ui-resizable-handle").show();



    }
    else {
        $("#droppable").find(".ui-resizable-handle").hide();
        $("#tools").hide();
    }


    $('.drag').dblclick(function () { //the dialog box to enter the IP address opens on double click
        $('#configbox').dialog('open');
        return false;
    });

});

/*The submit button*/
        $(function () {
            $("#submit").click(function () {
                            enter = $("#address").val();
                            $("<div>"+enter+"</div>").appendTo(currentDragImg); 
                        });
    });

知道为什么会这样吗？任何输入将不胜感激。谢谢

Answer 1

我不确定，但你可以试试这个。

起初您的提交按钮不起作用，因为没有带有 id = submit(Probably display: none) 的元素。但是在你打开对话框后，即带有 id = configbox 的元素。提交按钮也在 DOM 上，因此下次打开对话框时，点击事件被绑定到提交按钮。

您可以在打开对话框后添加点击事件，如下所示。

$('.drag').dblclick(function () { //the dialog box to enter the IP address opens on double click
            $('#configbox').dialog('open');
             $(function () {
                $("#submit").click(function () {
                                enter = $("#address").val();
                                $("<div>"+enter+"</div>").appendTo(currentDragImg); 
                            });
            return false;
        });

请尝试并发表评论。希望能帮助到你。

对话框中的 JQueryUI 提交按钮仅在第二次打开对话框后才有效

JQueryUI Submit button found in dialog box only works after second time opening the dialog

jquery

jquery-ui

jquery-ui-dialog